Novità di DevTools (Chrome 78)

Kayce Basques

Supporto multi-cliente nel riquadro Controlli

Ora puoi utilizzare il riquadro Controlli in combinazione con altre funzionalità di DevTools, come il blocco delle richieste e le sostituzione locali.

Ad esempio, supponiamo che il report del riquadro Controlli 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 che bloccano il rendering.

Figura 1. Il punteggio Rendimento iniziale.

Figura 2. Il report iniziale indica che 3 script che bloccano il rendering sono un problema.

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

Figura 3. Utilizza la scheda Blocca richiesta per bloccare gli script problematici.

E poi controlla di nuovo la pagina:

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

In alternativa, puoi utilizzare le sostituzione locali per aggiungere attributi async a ciascuno dei tag script, ma "lasciamo questo esercizio al lettore". Vai alla demo multiclient per provarlo. In alternativa, dai un'occhiata a questo tweet per una dimostrazione video.

Problema di Chromium 991906

Debug del gestore dei pagamenti

La sezione Servizi in background del riquadro Applicazione ora supporta gli eventi Gestore pagamenti.

1. Vai al riquadro Application (Applicazione).
2. Apri il riquadro Gestore pagamenti.

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

   

   Figura 5. Registrazione degli eventi di gestore dei pagamenti.

4. Attiva Mostra eventi di altri domini se gli eventi di gestore dei pagamenti si verificano in un'altra origine.

5. Dopo aver attivato un evento di gestore dei pagamenti, fai clic sulla riga dell'evento per saperne di più.

   

   Immagine 6. Visualizzazione di un evento di gestore dei pagamenti.

Problema di Chromium 980291

Lighthouse 5.2 nel riquadro Controlli

Il pannello Controlli ora esegue Lighthouse 5.2. Il nuovo controllo diagnostico Utilizzo di terze parti indica quanto codice di terze parti è stato richiesto e per quanto tempo questo codice ha bloccato il thread principale durante il caricamento della pagina. Consulta 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 Uso di terze parti.

Problema Chromium 772558

Largest Contentful Paint nel riquadro Rendimento

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

Immagine 8. L'indicatore LCP nella sezione Tempi.

Per evidenziare il nodo DOM associato all'LCP:

1. Fai clic sull'indicatore LCP nella sezione Tempi.

2. Passa il mouse sopra Nodo correlato nella scheda Riepilogo per evidenziare il nodo nell'area visibile.

   

   Figura 9. La sezione Nodo correlato della scheda Riepilogo.

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

Segnalare problemi di DevTools dal menu principale

Se riscontri un bug in DevTools e vuoi segnalarlo o se hai un'idea su come migliorare DevTools e vuoi richiedere una nuova funzionalità, vai a 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 su Glitch aumenta notevolmente la capacità del team di correggere il bug o implementare la richiesta di funzionalità.

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

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

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.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema DevTools in DevTools.
• Invia un tweet all'account @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti per DevTools.

Novità di DevTools

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