Novità di DevTools, Chrome 135

Sofia Emelianova
Sofia Emelianova
GitHub

Miglioramenti al riquadro sul rendimento

Questa versione introduce una serie di miglioramenti al riquadro Rendimento.

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

La scheda Rendimento > Riepilogo ora mostra i link agli script e alle origini pertinenti per le chiamate di profilo e funzione, quindi non devi più passare il mouse sopra questi eventi nel canale Principale.

L'immagine prima e dopo l'aggiunta della sorgente e dell'origine alla scheda Riepilogo.

Inoltre, i canali 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 del campo "LCP per fase"

Se i dati sul campo sono attivati, la scheda Rendimento > Approfondimenti > LCP per fase ora mostra i tempi di immagine del 75° percentile del report sull'esperienza utente di Chrome in un'altra tabella, in modo da poter confrontare i tempi direttamente nella scheda.

L'analisi "LCP per fase" supporta i dati di campo prima e dopo l'aggiunta.

Approfondimento "Albero delle dipendenze di rete"

La scheda Rendimento > Approfondimenti aggiunge alla propria raccolta la nuova informazione Albero delle dipendenze di rete. L'informazione indica se hai concatenato richieste fondamentali, il che non è consigliabile. Passa il mouse sopra le richieste elencate nell'approfondimento per visualizzarle evidenziate nel canale Rete.

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

Evidenziazione dello stack più pesante

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

Visualizzazione ad albero dell'accessibilità in Elementi

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

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

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

L'albero di accessibilità ti consente di controllare in che modo le tecnologie per la disabilità vedono 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 riquadri

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

Lo stato prima e dopo il miglioramento degli stati vuoti nei riquadri Rete e Ricerca.

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

L'opzione Chiedi all'IA ora si trova nella parte inferiore dei menu a discesa, anziché in alto.

L'immagine prima e dopo lo spostamento dell'opzione "Chiedi all'IA" nella parte inferiore del menu a discesa.

Non esitare a lasciare il tuo 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 sul rendimento come informativi in caso di condizioni di superamento anziché nasconderli nella sezione dei controlli superati. Consulta l'elenco completo delle modifiche.

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

Problema di Chromium: 40543651.

Altri punti salienti

Di seguito sono riportate alcune correzioni e alcuni miglioramenti significativi di questa release:

  • Rendimento > Riepilogo: sono state sostituite le due righe Tempo totale e Tempo auto con 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 evidenzia gli elementi che vengono visualizzati utilizzando la navigazione da tastiera (crbug.com/396311936).
  • Elementi: i problemi relativi a <select> sono ora supportati e evidenziati con un sottolineatura ondulata (crbug.com/378738916).
  • Rete: il "punto di override" e le icone di avviso relative ai cookie ora vengono visualizzati a destra del nome della scheda, anziché a sinistra (crbug.com/390556283).

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.

Novità di DevTools

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