Novità di DevTools (Chrome 74)

Kayce Basques

Siamo felici di rivederti. Ecco le novità.

Versione video di questa pagina

Evidenzia tutti i nodi interessati dalla proprietà CSS

Passa il mouse sopra una proprietà CSS che influisce sul modello a scatola di un nodo, come padding o margin, per evidenziare tutti i nodi interessati dalla dichiarazione.

Figura 1. Se passi il mouse sopra una proprietà margin, vengono evidenziati i margini di tutti i nodi interessati dichiarazione

Lighthouse v4 nel riquadro Controlli

I nuovi target tocco non hanno dimensioni appropriate per verificare che elementi interattivi come pulsanti e link siano opportunamente di grandi dimensioni e distanziati sui dispositivi mobili.

La categoria PWA di un report ora utilizza un sistema di valutazione dei badge.

Figura 3. Il nuovo sistema di valutazione dei badge per la categoria PWA

Visualizzatore messaggi binari WebSocket

Per visualizzare i contenuti di un messaggio WebSocket binario:

1. Apri il riquadro Rete. Per apprendere le nozioni di base sull'analisi, consulta Esaminare l'attività di rete all'attività di rete.

   

   Figura 4. Riquadro Rete

2. Fai clic su WS per filtrare tutte le risorse che non sono connessioni WebSocket.

   

   Figura 5. Dopo aver fatto clic su WS, vengono visualizzate solo le connessioni WebSockety

3. Fai clic sul nome di una connessione WebSocket per ispezionarla.

   

   Figura 6. Ispezione di una connessione WebSocket

4. Fai clic sulla scheda Messaggi.

   

   Figura 7. La scheda Messaggi

5. Fai clic su una delle voci Messaggio binario per ispezionarla.

   

   Figura 8. Ispezione di un messaggio binario

Utilizza il menu a discesa nella parte inferiore del visualizzatore per convertire il messaggio in formato Base64 o UTF-8. Clic Copia negli appunti per copiare un messaggio binario negli appunti.

Figura 9. Visualizzazione di un messaggio binario come Base64

Acquisisci screenshot dell'area nel menu dei comandi

Gli screenshot dell'area ti consentono di acquisire uno screenshot di una parte dell'area visibile. Questa funzione è stata per un po', ma il flusso di lavoro per accedervi era alquanto nascosto. Gli screenshot dell'area sono ora disponibili dal menu dei comandi.

1. Imposta lo stato attivo su DevTools, quindi premi Ctrl+Maiusc+P oppure Comando+Maiusc+P (Mac) per aprire il menu dei comandi.

   

   Figura 10. Menu dei comandi

2. Inizia a digitare area, seleziona Acquisisci screenshot dell'area, quindi premi Invio.

3. Trascina il mouse sulla sezione dell'area visibile di cui vuoi acquisire uno screenshot.

   

   Figura 11. Selezione della parte dell'area visibile da acquisire per uno screenshot

Filtri dei service worker nel riquadro Rete

Digita is:service-worker-initiated o is:service-worker-intercepted nel filtro del riquadro Rete casella di testo per visualizzare le richieste causate (initiated) o potenzialmente modificate (intercepted) da un service worker.

Figura 12. Filtro per is:service-worker-initiated

Figura 13. Filtro per is:service-worker-intercepted

Per ulteriori informazioni su come filtrare i log di rete, consulta Filtrare le risorse.

Aggiornamenti al riquadro del rendimento

Le registrazioni delle esibizioni ora eseguono il markup delle attività lunghe e di First Paint.

Consulta Ridurre il lavoro del thread principale per un esempio di utilizzo del riquadro Prestazioni per analizzare delle prestazioni di caricamento delle pagine.

Attività lunghe in Registrazioni delle prestazioni

Le registrazioni delle esibizioni ora mostrano tasks lunghe.

Figura 14. Passare il mouse sopra un'attività lunga in una registrazione dell'esecuzione

First Paint nella sezione Tempi

Nella sezione Tempi di una registrazione di un'esibizione ora viene indicata la prima colorazione.

Figura 15. First Paint nella sezione Tempi

Nuovo tutorial DOM

Consulta la pagina Inizia a visualizzare e modificare il DOM per un tour pratico delle informazioni sul DOM le funzionalità di machine learning.

Scaricare i canali in anteprima

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

Contattare il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità e modifiche nel post o di qualsiasi altra informazione relativa a DevTools.

• Inviaci un suggerimento o un feedback tramite crbug.com.
• Segnala un problema di DevTools utilizzando Altre opzioni   > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet all'indirizzo @ChromeDevTools.
• Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.

Novità di DevTools

Un elenco di tutto ciò che è stato trattato nella serie Novità di DevTools.