Novità di DevTools (Chrome 74)

Kayce Basques
Kayce Basques
X GitHub

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

Se passi il mouse sopra una proprietà del margine, vengono evidenziati 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 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.

Il nuovo sistema di punteggio dei badge per la categoria PWA

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.

    Il riquadro Network

    Figura 4. Il riquadro Network

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

    Dopo aver fatto clic su WS, vengono visualizzate solo le 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.

    Ispezione di una connessione WebSocket

    Figura 6. Ispezione di una connessione WebSocket

  4. Fai clic sulla scheda Messaggi.

    Scheda Messaggi

    Figura 7. Scheda Messaggi

  5. Fai clic su una delle voci Binary Message per esaminarla.

    Ispezione di un messaggio binario

    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 Copia negli appunti per copiare il messaggio binario negli appunti.

Visualizzazione di un messaggio binario come Base64

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. Concentrati su DevTools e poi premi Ctrl+Maiusc+P o Cmd+Maiusc+P (Mac) per aprire il menu dei comandi.

    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.

    Selezionare la parte dell'area visibile di cui acquisire lo screenshot

    Figura 11. Selezionare la parte dell'area visibile di cui acquisire lo screenshot

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.

Filtro per is:service-worker-initiated

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

Filtro per is:service-worker-intercepted

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 della pagina.

Attività lunghe nelle registrazioni del rendimento

Le registrazioni delle prestazioni ora mostrano le attività lunghe.

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

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.

First Paint nella sezione Timing

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.

Novità di DevTools

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