Novità di DevTools (Chrome 78)

Kayce Basques

Supporto multi-cliente nel riquadro Controlli

Ora puoi utilizzare il riquadro Audit in combinazione con altre funzionalità di DevTools come Blocco richieste e Override locali.

Ad esempio, supponiamo che il report del pannello Audit indichi che il punteggio di rendimento della tua pagina è 70 e che una delle maggiori opportunità di miglioramento del rendimento sia l'eliminazione delle risorse di blocco del rendering.

Figura 1. Il punteggio iniziale del rendimento.

Figura 2. Il report iniziale indica che 3 script di rendering bloccanti sono un problema.

Ora che il riquadro Audit può essere utilizzato in combinazione con il blocco delle richieste, puoi misurare rapidamente l'impatto degli script di blocco del rendering sulle prestazioni di caricamento bloccando le richieste per gli script di blocco del rendering:

Figura 3. Utilizzando la scheda Blocco richieste per bloccare gli script problematici.

e poi controllando di nuovo la pagina:

Figura 4. Il punteggio Rendimento è migliorato a 97 dopo il blocco degli script problematici.

In alternativa, puoi utilizzare gli override locali per aggiungere attributi async a ciascun tag script, ma "lasceremo questo compito al lettore". Guarda questo tweet per una dimostrazione video.

Problema di Chromium n. 991906

Debug del gestore dei pagamenti

La sezione Servizi in background del riquadro Applicazione ora supporta gli eventi Payment Handler.

1. Vai al riquadro Applicazione.
2. Apri il riquadro Gestore pagamenti.

3. Fai clic su Registra. DevTools registra gli eventi del gestore dei pagamenti per 3 giorni, anche quando è chiuso.

   

   Figura 5. Registrazione degli eventi del gestore dei pagamenti.

4. Attiva l'opzione Mostra eventi di altri domini se gli eventi Payment Handler si verificano su un'origine diversa.

5. Dopo aver attivato un evento Payment Handler, fai clic sulla riga dell'evento per saperne di più.

   

   Figura 6. Visualizzazione di un evento Payment Handler.

Problema di Chromium n. 980291

Lighthouse 5.2 nel riquadro Controlli

Il riquadro Controlli ora esegue Lighthouse 5.2. Il nuovo controllo diagnostico Utilizzo di terze parti indica la quantità di codice di terze parti richiesta e per quanto tempo questo codice di terze parti ha bloccato il thread principale durante il caricamento della pagina. Consulta la sezione Ottimizzare le risorse di terze parti per scoprire di più su come il codice di terze parti può peggiorare le prestazioni di caricamento.

Immagine 7. Il controllo Utilizzo di terze parti.

Problema di Chromium n. 772558

Largest Contentful Paint nel pannello Rendimento

Quando analizzi le prestazioni di caricamento nel riquadro Rendimento, la sezione Tempistiche ora include un marcatore per Largest Contentful Paint (LCP). LCP indica il tempo di rendering dell'elemento di contenuti più grande visibile nell'area visibile.

Immagine 8. Il marcatore LCP nella sezione Tempi.

Per evidenziare il nodo DOM associato a LCP:

1. Fai clic sul marcatore LCP nella sezione Tempi.

2. Passa il mouse sopra il nodo correlato nella scheda Riepilogo per evidenziare il nodo nel riquadro.

   

   Figura 9. La sezione Nodo correlato della scheda Riepilogo.

3. Fai clic su Nodo correlato per selezionarlo nell'albero DOM.

Segnalare problemi di DevTools dal menu principale

Se riscontri un bug in DevTools e vuoi segnalare un problema o se hai un'idea su come migliorare DevTools e vuoi richiedere una nuova funzionalità, vai al menu principale > Guida > Segnala un problema di DevTools per creare un problema nel tracker del team di ingegneria di DevTools. Fornire un esempio minimo e riproducibile aumenta notevolmente la capacità del team di correggere il bug o implementare la richiesta di funzionalità.

Guida > Segnala un problema di DevTools." width="800" height="604">

Figura 10. Menu principale > Guida > Segnala un problema di DevTools.

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.