Novità di DevTools (Chrome 76)

Kayce Basques

Ciao! Ecco le novità di Chrome DevTools in Chrome 76.

Completamento automatico con valori CSS

Quando aggiungi dichiarazioni di stile a un nodo DOM, a volte il valore della dichiarazione è più facile da ricordare rispetto al nome della dichiarazione. Ad esempio, quando metti in grassetto un nodo <p>, il valore bold potrebbe essere più facile da ricordare rispetto al nome font-weight. L'interfaccia utente di completamento automatico del riquadro Stile ora supporta i valori CSS. Se ricordi il valore della parola chiave che ti interessa, ma non il nome della proprietà, prova a digitare il valore e il completamento automatico ti aiuterà a trovare il nome che stai cercando.

Figura 1. Dopo aver digitato bold, il riquadro Stili viene completato automaticamente con font-weight: bold.

Invia feedback su questa nuova funzionalità all'issue #931145 di Chromium.

Una nuova UI per le impostazioni di rete

In precedenza, il riquadro Rete presentava un problema di usabilità per cui le opzioni come il menu di limitazione non erano raggiungibili quando la finestra DevTools era stretta. Per risolvere il problema e riordinare il pannello Rete, alcune opzioni meno utilizzate sono state spostate nel nuovo riquadro Impostazioni di rete .

Figura 2. Impostazioni di rete.

Le seguenti opzioni sono state spostate in Impostazioni di rete: Utilizza righe di richieste di grandi dimensioni, Raggruppa per frame, Mostra panoramica, Acquisisci screenshot. La figura 3 mappa le vecchie posizioni con quelle nuove.

Figura 3. Mappatura delle vecchie posizioni con quelle nuove.

Invia feedback su questa modifica dell'interfaccia utente al problema di Chromium n. 892969.

Messaggi WebSocket nelle esportazioni HAR

Quando esporti un file HAR dal riquadro Rete per condividere i log di rete con i tuoi colleghi, il file HAR ora include i messaggi WebSocket. La proprietà _webSocketMessages inizia con un trattino basso per indicare che si tratta di un campo personalizzato.

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

Invia feedback su questa nuova funzionalità al problema n. 496006 di Chromium.

Pulsanti di importazione ed esportazione HAR

Condividi più facilmente i log di rete con i colleghi grazie ai nuovi pulsanti Esporta tutto in formato HAR con contenuti e Importa file HAR . L'importazione e l'esportazione di file HAR sono disponibili in DevTools da un po' di tempo. I pulsanti più visibili sono la nuova modifica.

Figura 4. I nuovi pulsanti HAR.

Invia feedback su questa modifica dell'interfaccia utente al problema n. 904585 di Chromium.

Utilizzo totale della memoria in tempo reale

Il pannello Memoria ora mostra l'utilizzo totale della memoria in tempo reale.

Figura 5. La parte inferiore del riquadro Memoria mostra che la pagina utilizza 43,4 MB di memoria in totale. 209 KB/s indica che l'utilizzo totale della memoria aumenta di 209 KB al secondo.

Consulta anche Performance Monitor per monitorare l'utilizzo della memoria in tempo reale.

Invia un feedback su questa nuova funzionalità all'issue #958177 di Chromium.

Numeri di porta di registrazione del service worker

Il riquadro Service worker ora include i numeri di porta nei titoli per semplificare il monitoraggio del service worker di cui stai eseguendo il debug.

Figura 6. Porte del service worker.

Invia feedback su questa modifica della UI al problema n. 601286 di Chromium.

Ispezionare gli eventi di recupero dello sfondo e di sincronizzazione in background

Utilizza la nuova sezione Servizi in background del pannello Applicazione per monitorare gli eventi Recupero in background e Sincronizzazione in background. Dato che gli eventi di recupero in background e sincronizzazione in background si verificano in... beh... background, non sarebbe molto utile se gli strumenti di sviluppo registrassero solo gli eventi di recupero in background e sincronizzazione in background mentre sono aperti. Pertanto, una volta avviata la registrazione, gli eventi di recupero in background e sincronizzazione in background continueranno a essere registrati anche dopo la chiusura della scheda e di Chrome.

Vai al riquadro Applicazione, apri la scheda Recupero in background o Sincronizzazione in background, quindi fai clic su Registra per iniziare a registrare gli eventi. Fai clic su un evento per visualizzare ulteriori informazioni.

Immagine 7. Il riquadro Recupero dello sfondo. Demo di Maxim Salnikov.

Immagine 8. Il riquadro Sincronizzazione in background.

Invia feedback su queste nuove funzionalità all'issue #927726 di Chromium.

Puppeteer per Firefox

Puppeteer per Firefox è un nuovo progetto sperimentale che ti consente di automatizzare Firefox con l'API Puppeteer. In altre parole, ora puoi automatizzare Firefox e Chromium con la stessa API Node, come mostrato nel video di seguito.

Dopo aver eseguito node example.js, Firefox si apre e il testo page viene inserito nella casella di ricerca sul sito della documentazione di Puppeteer. Quindi la stessa attività viene ripetuta in Chromium.

Guarda l'intervento di Joel e Andrey di Google I/O 2019 su Puppeteer per saperne di più su Puppeteer e Puppeteer per Firefox. L'annuncio di Firefox inizia intorno alle 4:05.

Scaricare i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API della piattaforma web all'avanguardia e trovare problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità, degli aggiornamenti o di qualsiasi altro argomento relativo a DevTools.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema di DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet a @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti di DevTools.

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.