Novità di DevTools, Chrome 125

Sofia Emelianova
Sofia Emelianova
GitHub

Comprendi meglio errori e avvisi nella console con Gemini

Questa versione di Chrome offre funzionalità di AI generativa alla console di DevTools, allo scopo di aiutarti a comprendere meglio gli errori e gli avvisi che riscontri.

Per ottenere una spiegazione di un errore o di un avviso creata con l'IA, fai clic sul pulsante Lampadina scintilla. Scopri di più su questo errore (avviso) accanto al messaggio nella console e segui le istruzioni.

La spiegazione di un errore creata con l'IA.

Per ulteriori informazioni, vedi Individuare meglio gli errori e gli avvisi con l'IA.

Supporto delle regole @position-try in Elementi > Stili

Per aiutarti a eseguire il debug del posizionamento dell'ancora CSS, la scheda Elementi > Stili ora supporta le @position-try regole CSS. La scheda risolve i valori position-try-options e collega ogni opzione a una sezione @position-try --name dedicata.

Il prima e il dopo che supportano le regole CSS @position-try.

Per saperne di più, consulta Presentazione dell'API di posizionamento dell'ancoraggio CSS.

Problema di Chromium: 40279608.

Miglioramenti al riquadro Origini

Questa versione introduce diversi miglioramenti al riquadro Origini.

Configurare la stampa in formato gradevole e la chiusura delle parentesi automatiche

Ora puoi attivare o disattivare la stampa in formato gradevole e la chiusura delle parentesi automatiche per l'editor in Origini. La stampa accurata rende leggibili i file minimizzati. Quando si chiude la parentesi, viene aggiunta automaticamente una parentesi di chiusura () o }) o un tag (>) quando ne digiti di apertura.

Per configurare il comportamento pertinente, seleziona o deseleziona le nuove opzioni Parentesi di chiusura automatiche e Stampa automaticamente le sorgenti minimizzate in un formato gradevole in Impostazioni > Preferenze > Origini.

Lo stato prima e dopo l'aggiunta di nuove impostazioni per la stampa in formato bello e la chiusura delle parentesi graffe.

Problemi di Chromium: 40865010, 324314570.

Le promesse rifiutate gestite vengono riconosciute come confermate

Il riquadro Origini ora riconosce correttamente le promesse rifiutate come rilevate se le hai gestite con .catch() o .then() con due argomenti.

In altre parole, quando Origini > Breakpoint > Metti in pausa in caso di eccezioni non rilevate è attiva, il debugger non si fermerà su istruzioni simili alle seguenti:

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

Prima e dopo il riconoscimento dei rifiuti rilevati.

Problema di Chromium: 40283993.

Cause degli errori nella console

La console ora mostra le catene di cause di errore, se presenti, nella traccia dello stack.

Per semplificare il debug, puoi specificare le cause degli errori quando li rilevi e li rilanci. Quando la console risale la catena delle cause, stampa ogni pila di errori con un prefisso Caused by:, in modo che tu possa comunque vedere l'errore originale.

Le tracce dello stack prima e dopo la stampa con i prefissi "Causato da".

Problema di Chromium: 40182832.

Miglioramenti al riquadro Rete

Questa versione introduce diversi miglioramenti al riquadro Rete.

Controllare le intestazioni dei suggerimenti iniziali

Le intestazioni Early Hints hanno una sezione dedicata nella scheda Intestazioni della richiesta del riquadro Network. In precedenza, potevi trovare le intestazioni pertinenti nella sezione Intestazioni di risposta.

Early Hints è un codice di stato HTTP (103 Early Hints) utilizzato per inviare una risposta HTTP preliminare prima di una risposta finale. Ciò consente a un server di inviare al browser suggerimenti sulle risorse secondarie critiche (ad esempio, un foglio di stile o JavaScript critico) o sulle origini che probabilmente verranno utilizzate dalla pagina, mentre il server è impegnato a generare la risorsa principale.

L'immagine prima e dopo l'aggiunta di una sezione dedicata agli indicatori precoci.

Per ulteriori informazioni, consulta Caricare più velocemente le pagine utilizzando il tempo di attesa del server con gli indicatori anticipati.

Problema di Chromium: 40222701.

Nascondere la colonna Cascata

Ora puoi nascondere la colonna Struttura a cascata nel riquadro Rete in modo simile a come puoi nascondere altre colonne. Fai clic con il tasto destro del mouse su un nome di colonna e deseleziona la casella di controllo A cascata nel menu a discesa.

L'immagine prima e dopo l'aggiunta dell'opzione per nascondere la colonna a cascata.

Problema di Chromium: 40574989.

Miglioramenti al riquadro Prestazioni

Questa versione introduce diversi miglioramenti al riquadro Rendimento.

Acquisisci le statistiche del selettore CSS

Il riquadro Rendimento include una nuova impostazione che ti consente di acquisire le statistiche dei selettori CSS per gli eventi Ricalcolo stile di lunga durata.

Per visualizzare le statistiche, seleziona un evento Ricalcola stile e apri la nuova scheda Statistiche selettore. La scheda mostra informazioni sul tempo trascorso, sui tentativi di corrispondenza e sul conteggio, nonché sulla percentuale di non corrispondenze del percorso lento per ogni selettore.

Le statistiche del selettore prima e dopo l'aggiunta.

Problema di Chromium: 324282954.

Modificare l'ordine e nascondere i canali

Il riquadro Rendimento ha una nuova modalità di configurazione che ti consente di modificare l'ordine delle tracce e nasconderle.

Per accedere alla modalità di configurazione, fai clic sul pulsante Modifica a sinistra del nome della traccia. Quindi, fai clic su su o per spostare la traccia oppure fai clic su per nascondere. Al termine, fai clic sul pulsante Controlla a destra del nome della traccia.

La versione successiva, Chrome 126, apporterà ulteriori miglioramenti a questa UI.

Problema relativo a Chromium: 311439339.

Ignorare gli elementi di conservazione nel riquadro Memoria

Ora puoi ignorare gli elementi di conservazione nelle istantanee dell'heap che acquisisci con il riquadro Memoria.

Per ignorare un elemento di conservazione, seleziona un oggetto e, nella sezione Retainer, fai clic con il tasto destro del mouse su un elemento di conservazione e seleziona Ignora questo elemento di conservazione dal menu a discesa. Gli elementi di conservazione ignorati sono contrassegnati con il valore ignored nella colonna Distanza. Per non ignorare più gli elementi, fai clic su Ripristina elementi di conservazione ignorati nella barra delle azioni in alto.

L'immagine prima e dopo l'aggiunta di un'opzione per ignorare i fermi.

Inoltre, gli snapshot dell'heap ora supportano un numero maggiore (centinaia di milioni) di nodi e bordi di contenimento (332350576).

Problema di Chromium: 327337527.

Lighthouse 11.7.1

Nel riquadro Lighthouse ora è in esecuzione Lighthouse 11.7.1. Consulta l'elenco completo delle modifiche.

Tra le modifiche più importanti c'è il supporto deprecato per il plug-in Publisher Ads, che in questa versione non è più supportato.

Prima e dopo l'aggiunta della rimozione del supporto del plug-in degli annunci del publisher.

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

Problema relativo a Chromium: 772558.

Varie in evidenza

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

  • Il riquadro Registratore non è più in stato di anteprima (329271496).
  • Ora la console non mostra un errore quando un formattatore personalizzato restituisce un null per la funzione body(), che è un comportamento valido (329400119).
  • Il riquadro Origini ha aggiornato l'evidenziazione della sintassi. In particolare, ora supporta i flag v e d nell'espressione regolare.
  • Nella scheda Rete > Cookie è stato corretto un bug relativo alla mappatura dei cookie esenti ai cookie di risposta (41491846).
  • La scheda Elementi > Stili ora esegue le seguenti operazioni:
    • Mostra le regole ereditate completamente sovraccarcate con proprietà personalizzate (41489874).
    • Mette in evidenza il valore applicato in light-dark() a seconda del tema a colori (331123816).

Scaricare i canali di 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, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano gli 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.