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 Richiedi Blocco e Override locali.

Ad esempio, supponiamo che il report del riquadro Controlli indichi che il punteggio del rendimento della tua pagina è 70. e una delle maggiori opportunità in termini di prestazioni è l'eliminazione delle risorse di blocco del rendering.

Il punteggio iniziale del rendimento è 70.

Figura 1. Il punteggio iniziale del rendimento.

Il report iniziale indica che tre script che bloccano la visualizzazione sono un problema.

Figura 2. Il report iniziale indica che tre script che bloccano la visualizzazione sono un problema.

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

Utilizzare la scheda Blocco richieste per bloccare gli script problematici.

Figura 3. Utilizzare la scheda Request Block (Richiedi blocco) per bloccare gli script problematici.

Quindi, controlla di nuovo la pagina:

Il punteggio delle prestazioni è migliorato fino a 97 dopo aver attivato il blocco delle richieste.

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

In alternativa, puoi utilizzare Override locali per aggiungere attributi async a ciascuno script tag, ma "la lasciamo come un esercizio per il lettore". Vai alla demo multi-client per provarla. fuori. In alternativa, 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 il Gestore dei pagamenti. eventi.

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

  3. Fai clic su Registra. DevTools registra gli eventi relativi al gestore dei pagamenti per tre giorni, anche quando DevTools chiuso.

    Registrazione di eventi relativi al gestore dei pagamenti.

    Figura 5. Registrazione di eventi relativi al gestore dei pagamenti.

  4. Attiva l'opzione Mostra eventi di altri domini se gli eventi del gestore dei pagamenti si verificano su un altro dominio origine dati.

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

    Visualizzazione di un evento Gestore dei pagamenti.

    Immagine 6. Visualizzazione di un evento Gestore dei pagamenti.

Problema di Chromium n. 980291

Lighthouse 5.2 nel riquadro Audit

Nel riquadro Controlli ora è in esecuzione Lighthouse 5.2. La nuova diagnostica sull'utilizzo di terze parti indica quanto codice di terze parti è stato richiesto e per quanto tempo è stato bloccato sul thread principale durante il caricamento della pagina. Per saperne di più, consulta Ottimizzare le risorse di terze parti. su come il codice di terze parti può ridurre le prestazioni di caricamento.

Uno screenshot dell'"Utilizzo di terze parti" nella UI del report Lighthouse.

Immagine 7. Il controllo Utilizzo di terze parti.

Problema di Chromium n. 772558

Largest Contentful Paint nel riquadro Rendimento

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

L'indicatore LCP nella sezione Tempi.

Immagine 8. L'indicatore LCP nella sezione Tempi.

Per evidenziare il nodo DOM associato a LCP:

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

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

    La sezione Nodo correlato della scheda Riepilogo.

    Figura 9. La sezione Nodo correlato della scheda Riepilogo.

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

Invia problemi relativi a DevTools dal menu principale

Se riscontri un bug in DevTools e vuoi segnalare un problema o ti capita di avere un'idea di come per migliorare DevTools e vuoi richiedere una nuova funzionalità, vai al Menu principale > Guida > Segnala un Problema DevTools per creare un problema nel tracker del team di tecnici DevTools. L'invio di un esempio minimo e riproducibile su Glitch aumenta drasticamente la capacità del team di correggere il bug o implementare la richiesta di funzione.

Guida > Segnala un problema DevTools." larghezza="800" altezza="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 in anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

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

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema di DevTools utilizzando Altre opzioni   Altro > Guida > Segnala un problema di DevTools in DevTools.
  • Invia un tweet all'indirizzo @ChromeDevTools.
  • Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.

Novità di DevTools

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