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 di riquadro di un nodo, ad esempio padding o margin, per evidenziare tutti i nodi interessati da quella dichiarazione.

Se passi il mouse sopra una proprietà di margine, vengono evidenziati tutti i nodi interessati da quella dichiarazione

Figura 1. Se passi il mouse sopra una proprietà margin, vengono evidenziati i margini di tutti i nodi interessati da quella 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 di dimensioni e spaziatura adeguate sui dispositivi mobili.

La categoria PWA di un report ora utilizza un sistema di punteggio 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 Esaminare l'attività di rete per conoscere le nozioni di base sull'analisi dell'attività di rete.

    Riquadro Rete

    Figura 4. Riquadro Rete

  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 ispezionarla.

    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 Messaggio binario per ispezzionarla.

    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 in formato binario negli appunti.

Visualizzazione di un messaggio binario come Base64

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 funzionalità è stata introdotta da un po' di tempo, ma il flusso di lavoro per accedervi era piuttosto nascosto. Gli screenshot delle aree sono ora disponibili nel menu dei comandi.

  1. Imposta lo stato attivo su DevTools e premi Control+Maiusc+P o Comando+Maiusc+P (Mac) per aprire il menu dei comandi.

    Il menu dei comandi

    Figura 10. Il menu dei comandi

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

  3. Trascina il mouse sopra la sezione della visualizzazione in cui vuoi acquisire uno screenshot.

    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 worker di servizio 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 servizio worker.

Filtro per is:service-worker-initiated

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

Filtrare per is:service-worker-intercepted

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

Per saperne di più sul filtro dei log di rete, consulta Filtrare le risorse.

Aggiornamenti del riquadro sul rendimento

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

Consulta Eseguire meno lavoro nel thread principale per un esempio di utilizzo del riquadro Rendimento per analizzare il rendimento del caricamento della pagina.

Attività lunghe nelle registrazioni del rendimento

Le registrazioni delle prestazioni ora mostrano le attività lunghe.

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

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

First Paint nella sezione Tempi

La sezione Tempi di una registrazione delle prestazioni ora indica il primo rendering.

First Paint nella sezione Tempi

Figura 15. First Paint nella sezione Tempi

Nuovo tutorial sul DOM

Consulta Iniziare a visualizzare e modificare il DOM per un tour pratico delle funzionalità relative al DOM.

Scaricare i canali di anteprima

Valuta la possibilità di utilizzare Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

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

Novità di DevTools

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