Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di DevTools (Chrome 78)

Kayce Basques

Supporto multi-cliente nel riquadro Controlli

Ora puoi utilizzare il riquadro Controlli insieme ad altre funzionalità di DevTools, come Blocco delle richieste e Override locali.

Ad esempio, supponi che il report del riquadro Controlli indichi che il punteggio relativo alle prestazioni della tua pagina sia 70 e che una delle migliori opportunità di rendimento sia l'eliminazione delle risorse che bloccano la visualizzazione.

Il punteggio iniziale del rendimento è 70.

Figura 1. Il punteggio iniziale del rendimento.

Il report iniziale indica che un problema è costituito da tre script che bloccano la visualizzazione.

Figura 2. Il report iniziale indica che un problema è costituito da tre script che bloccano la visualizzazione.

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

Utilizzo della scheda Blocco richieste per bloccare gli script problematici.

Figura 3. Utilizzo della scheda Blocco richieste per bloccare gli script problematici.

Controlla di nuovo la pagina:

Il punteggio delle prestazioni è migliorato a 97 dopo l'attivazione del blocco delle richieste.

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

In alternativa, puoi utilizzare le Sostituzioni locali per aggiungere gli attributi async a ogni tag script, ma "lo lasceremo come un esercizio per il lettore". Vai a Demo multi-cliente per provarla. In alternativa, consulta 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 Gestore dei pagamenti.

Vai al riquadro Applicazione.
Apri il riquadro Gestore dei pagamenti.
Fai clic su Record (Registra). DevTools registra gli eventi del gestore dei pagamenti per tre giorni, anche quando DevTools è chiuso.

Figura 5. Registrazione degli eventi di gestione dei pagamenti.
Attiva l'opzione Mostra gli eventi di altri domini se gli eventi del gestore dei pagamenti si verificano su un'origine diversa.
Dopo aver attivato un evento Gestore dei pagamenti, fai clic sulla riga dell'evento per saperne di più.

Immagine 6. Visualizzazione di un evento Gestore dei pagamenti.

Problema di Chromium n. 980291

Lighthouse 5.2 nel riquadro Controlli

Nel riquadro Controlli ora è in esecuzione Lighthouse 5.2. Il nuovo controllo diagnostico Utilizzo di terze parti indica la quantità di codice di terze parti richiesto e per quanto tempo il thread principale 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ò ridurre le prestazioni del caricamento.

Uno screenshot del controllo "Utilizzo di terze parti" nell'interfaccia utente del report Lighthouse.

Immagine 7. Il controllo Utilizzo di terze parti.

Problema di Chromium n. 772558

Largest Contentful Paint nel riquadro Rendimento

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

L'indicatore LCP nella sezione Tempi.

Immagine 8. L'indicatore LCP nella sezione Tempi.

Per evidenziare il nodo DOM associato all'LCP:

Fai clic sull'indicatore LCP nella sezione Tempi.
Passa il mouse sopra il Nodo correlato nella scheda Riepilogo per evidenziare il nodo nell'area visibile.

Figura 9. La sezione Nodo correlato della scheda Riepilogo.
Fai clic sul Nodo correlato per selezionarlo nell'albero DOM.

Problemi relativi ai file 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 a Menu principale > Guida > Segnala un problema di DevTools per creare un problema nel tracker del team di tecnici 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.

Scarica i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o beta come browser di sviluppo predefinito. Questi canali in anteprima ti consentono di accedere alle funzionalità di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.

Inviaci un suggerimento o un feedback tramite crbug.com.
Segnala un problema DevTools utilizzando Altre opzioni > Guida > Segnala i problemi di DevTools in DevTools.
Tweet all'indirizzo @ChromeDevTools.
Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.