Novità di DevTools, Chrome 135

Sofia Emelianova
Sofia Emelianova
GitHub

Miglioramenti del riquadro Prestazioni

Questa versione introduce una serie di miglioramenti al pannello Rendimento.

Link di origine e script per le chiamate di profili e funzioni in Performance

La scheda Rendimento > Riepilogo ora mostra i link agli script e alle origini pertinenti per i profili e le chiamate di funzioni, così non devi passare il mouse sopra questi eventi nella traccia Principale.

Prima e dopo l'aggiunta di origine e provenienza alla scheda Riepilogo.

Inoltre, le tracce Rete e Principale ora mostrano i nomi di terze parti, se presenti, nelle descrizioni comando quando passi il mouse sopra gli eventi.

Problema di Chromium: 368541957.

Supporto dei dati di campo "LCP per fase"

Se i dati sul campo sono attivi, la statistica Rendimento > Approfondimenti > LCP per fase ora mostra i tempi delle immagini al 75° percentile del Report sull'esperienza utente di Chrome in una tabella aggiuntiva, in modo da poter confrontare i tempi direttamente nella statistica.

Prima e dopo l'aggiunta del supporto dei dati dei campi all'approfondimento "LCP per fase".

Insight "Albero delle dipendenze di rete"

La scheda Rendimento > Approfondimenti aggiunge alla sua raccolta il nuovo approfondimento Albero delle dipendenze di rete. L'approfondimento ti indica se hai concatenato richieste critiche, il che non è consigliabile. Passa il mouse sopra le richieste elencate nell'insight per visualizzarle evidenziate nella traccia Rete.

Per scoprire di più, consulta Evita di concatenare le richieste fondamentali.

Evidenziazione dello stack più pesante

Il riquadro Rendimento ora evidenzia gli elementi nella traccia Principale quando li passi con il mouse in Albero delle chiamate o Dal basso verso l'alto > Stack più pesante nella barra laterale e attenua il resto. In questo modo puoi trovare visivamente gli elementi nidificati nello stack di chiamate che richiedono più tempo.

Visualizzazione ad albero dell'accessibilità in Elementi

La visualizzazione dell'albero dell'accessibilità a pagina intera ora è attivata per impostazione predefinita nel riquadro Elementi.

In precedenza, potevi sfogliare un albero dell'accessibilità separato nella scheda Elementi > Accessibilità. Ora puoi fare clic sul pulsante Passa alla visualizzazione ad albero dell'accessibilità nell'angolo in alto a destra dell'albero DOM nel riquadro Elementi per passare dall'albero DOM a quello dell'accessibilità della pagina intera e viceversa, in modo da esplorarli e la loro relazione più facilmente.

Prima e dopo l'attivazione della visualizzazione ad albero dell'accessibilità a pagina intera per impostazione predefinita .

L'albero dell'accessibilità ti consente di esaminare il modo in cui la tecnologia assistiva vede i tuoi contenuti e mostra gli attributi ARIA e le proprietà di accessibilità calcolate dei nodi DOM. Per saperne di più, consulta Albero di accessibilità completo in Chrome DevTools.

Problema di Chromium: 40808541.

Stati vuoti migliorati per vari pannelli

Gli stati vuoti (quando non è aperto nulla) di vari riquadri, sezioni e schede sono stati semplificati per indicarti esattamente cosa fare per iniziare a utilizzarli. Alcuni stati vuoti, ad esempio nel riquadro Network, ora hanno pulsanti utili pertinenti come Ricarica pagina.

Prima e dopo il miglioramento degli stati vuoti nei pannelli Rete e Ricerca.

L'opzione "Chiedi all'AI" è stata spostata in fondo al menu

L'opzione Chiedi all'AI ora si trova in fondo ai menu a discesa, anziché in alto.

Prima e dopo lo spostamento dell'opzione "Chiedi all'AI" in fondo al menu a discesa.

Non esitare a lasciare un feedback nel riquadro Assistenza AI all'indirizzo crbug.com/364805393.

Lighthouse 12.4.0

Il riquadro Lighthouse ora esegue Lighthouse 12.4.0.

Questa versione contrassegna alcuni controlli del rendimento come informativi in condizioni di superamento anziché nasconderli nella sezione dei controlli superati. Consulta l'elenco completo delle modifiche.

Per scoprire le nozioni di base sull'utilizzo del riquadro Lighthouse in DevTools, consulta Lighthouse: ottimizzare la velocità del sito web.

Problema di Chromium: 40543651.

Punti salienti vari

Di seguito sono riportate alcune correzioni e alcuni miglioramenti degni di nota in questa release:

  • Rendimento > Riepilogo: le due righe Tempo totale e Tempo personale sono state sostituite da una riga Durata che mostra anche (self time) tra parentesi, se presente (crbug.com/395572753).
  • Problemi: sono stati aggiunti nuovi tipi di problemi: problemi <select> nell'albero di accessibilità ed errori di firma del messaggio SRI che si verificano durante l'analisi o la convalida nel servizio di rete (crbug.com/381044049, crbug.com/347890366).
  • Accessibilità: la scheda Elementi > Stili ora delinea gli elementi che scorri utilizzando la navigazione da tastiera (crbug.com/396311936).
  • Elementi: i problemi relativi a <select> sono ora supportati ed evidenziati con una sottolineatura ondulata (crbug.com/378738916).
  • Rete: le icone del "punto di override" e dell'avviso sui cookie vengono ora mostrate a destra del nome della scheda, anziché a sinistra (crbug.com/390556283).

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.

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.