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, ad esempio padding o margin, per mettere in evidenza tutti i nodi interessati da questa dichiarazione.

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

Lighthouse v4 nel riquadro Controlli

Il nuovo controllo I target dei tocchi non sono dimensionati in modo appropriato verifica che gli elementi interattivi come pulsanti e link siano sufficientemente grandi 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 punteggio dei badge per la categoria PWA

Visualizzatore di messaggi binari WebSocket

Per visualizzare i contenuti di un messaggio WebSocket binario:

1. Apri il riquadro Rete. Consulta Ispezionare l'attività di rete per apprendere le nozioni di base sull'analisi dell'attività di rete.

   

   Figura 4. Il 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 WebSocket

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

   

   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 Binary Message per esaminarla.

   

   Figura 8. Ispezione di un messaggio binario

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

Figura 9. Visualizzazione di un messaggio binario come Base64

Acquisire uno screenshot dell'area nel menu dei comandi

Gli screenshot dell'area ti consentono di acquisire uno screenshot di una parte del riquadro. Questa funzionalità esiste da tempo, ma il flusso di lavoro per accedervi era piuttosto nascosto. Gli screenshot dell'area sono ora disponibili dal menu dei comandi.

1. Metti a fuoco DevTools e poi premi Ctrl+Maiusc+P o Cmd+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 sopra la sezione del riquadro che vuoi acquisire.

   

   Figura 11. Selezionare la porzione di area visibile da acquisire

Filtri dei service worker nel riquadro Rete

Digita is:service-worker-initiated o is:service-worker-intercepted nella casella di testo del filtro del riquadro Rete 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 sul filtraggio dei log di rete, consulta Filtrare le risorse.

Aggiornamenti al riquadro Prestazioni

Le registrazioni delle prestazioni ora contrassegnano le attività lunghe e il First Paint.

Consulta Riduci il lavoro del thread principale per un esempio di utilizzo del pannello Rendimento per analizzare il rendimento del caricamento delle pagine.

Attività lunghe nelle registrazioni delle prestazioni

Le registrazioni delle prestazioni ora mostrano le attività lunghe.

Figura 14. Passaggio del mouse sopra un'attività lunga in una registrazione del rendimento

First Paint nella sezione Timing

La sezione Tempistiche di una registrazione delle prestazioni ora contrassegna First Paint.

Figura 15. First Paint nella sezione Timing

Nuovo tutorial sul DOM

Consulta Inizia a visualizzare e modificare il DOM per una visita guidata pratica delle funzionalità correlate al DOM.

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.