Novità di DevTools, Chrome 126

Sofia Emelianova
Sofia Emelianova
GitHub

Miglioramenti del riquadro Prestazioni

Questa versione introduce diversi miglioramenti al pannello Rendimento.

Spostare e nascondere le tracce con la modalità di configurazione delle tracce aggiornata

Ora puoi accedere alla modalità di configurazione delle tracce facendo clic con il tasto destro del mouse sul nome della traccia e selezionando Configura tracce. Il pulsante di modifica che richiedeva spazio aggiuntivo è stato rimosso.

Prima e dopo la sostituzione del pulsante Modifica con un'opzione di menu.

La modalità di configurazione delle tracce ti consente di modificare l'ordine delle tracce e di nasconderle. Fai clic sulla o sulla per spostare la traccia o fai clic su per nasconderla. Per uscire dalla modalità di configurazione, fai clic su Fine della configurazione delle tracce in basso. Questa configurazione viene mantenuta per le nuove tracce, ma non per le sessioni successive di DevTools.

Problema di Chromium: 336266699.

Ignora gli script nel grafico a fiamme

Il grafico a fiamma nella traccia Principale aggiunge il supporto dell'elenco di elementi da ignorare. Ora puoi fare clic con il tasto destro del mouse su uno script nel grafico e selezionare Aggiungi script all'elenco Ignora.

L'opzione di menu per aggiungere lo script all'elenco di elementi da ignorare, gli script contrassegnati come ignorati e le regole corrispondenti in Impostazioni.

Il grafico comprime gli script ignorati, li contrassegna come Nell'elenco di elementi da ignorare e li aggiunge alle regole di esclusione personalizzate nelle Impostazioni > Elenco di elementi da ignorare. Gli script ignorati vengono salvati finché non li rimuovi dalla traccia o dalle regole di esclusione personalizzate.

Problema di Chromium: 336266714.

Ridurre la CPU di 20 volte

Il menu di limitazione della CPU nelle Impostazioni di acquisizione del riquadro Rendimento riceve una nuova opzione Rallentamento 20x. In questo modo, ora puoi riprodurre e analizzare in modo più accurato i problemi di rendimento reali, anche su computer di fascia alta.

Prima e dopo l'aggiunta dell'opzione "Rallentamento 20x" alle "Impostazioni di acquisizione".

Problema di Chromium: 324978881.

Il riquadro Informazioni sulle prestazioni verrà ritirato

Il riquadro sperimentale Informazioni sulle prestazioni verrà ritirato nel 2024. Il team di DevTools sta lavorando all'integrazione delle funzionalità più utili nel riquadro Prestazioni. Il riquadro Approfondimenti sul rendimento ora mostra un banner nella parte superiore che ti informa del ritiro imminente.

Il banner di avviso di ritiro nel riquadro "Informazioni sulle prestazioni".

Per scoprire di più, consulta Strumenti per il rendimento nel 2024 e negli anni successivi.

Se hai feedback su cosa funziona, cosa non funziona e cosa ritieni possa essere migliorato, non esitare a contattarci.

Incolla le intere stringhe di intestazione per eseguirne l'override

Quando esegui l'override delle intestazioni, ora puoi incollare un'intera stringa di intestazione (HEADER_NAME: VALUE) e DevTools suddividerà la stringa in : in un nome di intestazione e il relativo valore.

Guarda come funziona nel video seguente.

Quando modifichi le intestazioni, il riquadro Rete ora ti avvisa se hai inserito caratteri diversi da caratteri alfanumerici, trattini e trattini bassi.

L'avviso accanto al nome di un'intestazione con caratteri non supportati.

Inoltre, i pulsanti di override delle opzioni di menu e Modifica sono disattivati per gli URL chrome://, il che corrisponde al comportamento previsto.

Problemi di Chromium: 330967147, 337012362, 328210785.

Trovare l'utilizzo eccessivo di memoria con i nuovi filtri negli snapshot dell'heap

Gli snapshot dell'heap nel riquadro Memoria ricevono nuovi filtri che possono aiutarti a trovare casi comuni di utilizzo inefficiente della memoria, come stringhe duplicate, oggetti conservati dai nodi DOM scollegati e la console DevTools.

Le opzioni di filtro prima e dopo l'aggiunta per i casi comuni di utilizzo inefficiente della memoria.

Problema di Chromium: 337094903.

Ispeziona i bucket di archiviazione in Applicazione > Archiviazione

Ora puoi esaminare i bucket di archiviazione in una struttura ad albero dedicata nella sezione Applicazione > Archiviazione. Questo albero, in precedenza sperimentale, è stato attivato per impostazione predefinita.

Prima e dopo l'attivazione della struttura ad albero dei bucket di archiviazione nella sezione Archiviazione.

Problema di Chromium: 338094915.

Disattivare gli avvisi di self-XSS con un flag della riga di comando

Se automatizzi l'utilizzo di Chrome o apri DevTools dalla riga di comando per il debug, spesso vorrai disattivare l'avviso di self-XSS che viene visualizzato in ogni nuova sessione di DevTools.

La finestra di dialogo di avviso self-XSS nella console.

Ora puoi disattivare questa finestra di dialogo passando il --unsafely-disable-devtools-self-xss-warnings flag della riga di comando a Chrome.

Problema di Chromium: 41491762.

Lighthouse 12.0.0

Il riquadro Lighthouse ora esegue Lighthouse 12.0.0.

Questo aggiornamento introduce una serie di modifiche, tra cui la rimozione della categoria PWA, la riorganizzazione della categoria SEO, il ritiro del risparmio complessivo, nuovi controlli e modifiche ai controlli. 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: 772558.

Punti salienti vari

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

  • Rendimento:
    • Le impostazioni di acquisizione lenta (Attiva la strumentazione di colorazione avanzata e Attiva le statistiche del selettore CSS) ora vengono cancellate automaticamente nella sessione successiva di DevTools.
    • La scheda Statistiche selettore ora non scorre automaticamente verso il basso quando aumenti lo zoom del grafico a fiamme e i dati cambiano (337999939).
  • Console: la scorciatoia Ctrl+` ora chiude la Console nel riquadro solo se è attiva (40875466, 328210785).
  • Compilazione automatica: l'analisi degli indirizzi è stata corretta (335409093, 335409707).
  • Accessibilità: gli annunci dello screen reader per le stringhe localizzate sono corretti (324930007).

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.