Novità di DevTools, Chrome 125

Sofia Emelianova
Sofia Emelianova

Comprendere meglio gli errori e gli 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 Scossa della lampadina. 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 scoprire di più, consulta Introduzione all'API CSS Anchor Positioning.

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 formattazione rende leggibili i file minimizzati. La chiusura delle parentesi aggiunge automaticamente una parentesi di chiusura () o }) o un tag (>) quando ne digiti una di apertura.

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

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 rilevate

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 intercetti e li rilanci. Quando la console risale la catena di 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 Rete. 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. In questo modo, un server può inviare al browser suggerimenti su risorse secondarie critiche (ad esempio uno stile o JavaScript critico) o 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 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 Ricalcolo 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 prima e dopo l'aggiunta del selettore.

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 per spostare la traccia verso l'alto o su per spostarla verso il basso oppure fai clic su per nasconderla. Al termine, fai clic sul pulsante Verifica a destra del nome della traccia.

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

Problema di Chromium: 311439339.

Ignorare i fermi nel riquadro Memoria

Ora puoi ignorare i retainer negli snapshot dell'heap acquisiti con il riquadro Memoria.

Per ignorare un fermo, seleziona un oggetto e, nella sezione Fermo, fai clic con il tasto destro del mouse su un fermo e seleziona Ignora questo fermo dal menu a discesa. I fermi ignorati sono contrassegnati con il valore ignored nella colonna Distanza. Per interrompere l'ignoramento, 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 retainer.

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

Il pannello Lighthouse ora esegue Lighthouse 11.7.1. Consulta l'elenco completo delle modifiche.

Tra le modifiche più importanti, è stata ritirata la funzionalità di supporto del plug-in Publisher Ads, che non è più supportato in questa versione.

La situazione prima e dopo l'aggiunta e la rimozione del supporto del plug-in Annunci del publisher.

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

Problema di Chromium: 772558.

Altri punti salienti

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

  • Il riquadro Registratore non è più in stato di anteprima (329271496).
  • La console ora non mostra un errore quando un formato personalizzato restituisce un null per la funzione body(), che è un comportamento valido (329400119).
  • Il riquadro Origini ha aggiornato l'evidenziatore della sintassi. In particolare, ora supporta i flag v e d nelle espressioni regolari.
  • 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).
    • Evidenzia il valore applicato in light-dark() in base al tema di colore (331123816).

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.