Novità di DevTools, Chrome 125

Sofia Emelianova

Comprendere meglio gli errori e gli avvisi nella console con Gemini

Questa versione di Chrome introduce funzionalità di AI generativa nella console di DevTools, con l'obiettivo di aiutarti a comprendere meglio gli errori e gli avvisi che riscontri.

Per ottenere una spiegazione dell'errore o dell'avviso generata dall'AI, fai clic sul pulsante Comprendi questo errore (avviso) accanto al messaggio nella console e segui le istruzioni.

Per saperne di più, vedi Comprendere meglio errori e avvisi con l'AI.

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 regole CSS @position-try. La scheda risolve i valori position-try-options e collega ogni opzione a una sezione @position-try --name dedicata.

Per saperne di più, consulta Introduzione dell'API CSS Anchor Positioning.

Problema di Chromium: 40279608.

Miglioramenti al riquadro Origini

Questa versione introduce diversi miglioramenti al riquadro Fonti.

Configurare la formattazione automatica e la chiusura delle parentesi

Ora puoi attivare o disattivare la stampa in formato leggibile e la chiusura automatica delle parentesi per l'editor in Origini. La formattazione del codice rende leggibili i file minimizzati. La chiusura delle parentesi aggiunge automaticamente una parentesi di chiusura () o }) o un tag (>) quando ne digiti uno di apertura.

Per configurare il comportamento pertinente, seleziona o deseleziona le nuove opzioni check_box Chiusura automatica delle parentesi e check_box Stampa in formato leggibile automatica delle origini compresse in settings Impostazioni > Preferenze > Origini.

Problemi di Chromium: 40865010, 324314570.

Le promesse rifiutate gestite vengono riconosciute come intercettate

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 > Punti di interruzione > check_box Metti in pausa in caso di eccezioni non rilevate è attivato, il debugger non si interrompe su istruzioni simili alle seguenti:

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

Problema di Chromium: 40283993.

Cause degli errori nella console

La console ora mostra le catene di cause di errore nello stack trace, se presenti.

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

Problema di Chromium: 40182832.

Miglioramenti al riquadro Network

Questa versione introduce diversi miglioramenti al riquadro Rete.

Ispezionare le intestazioni dei suggerimenti iniziali

Le intestazioni Early Hints hanno una sezione dedicata nella scheda Intestazioni della richiesta nel riquadro Rete. In precedenza, potevi trovare le intestazioni pertinenti nella sezione Intestazioni della 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 suggerimenti al browser su origini o risorse secondarie critiche (ad esempio, un foglio di stile o JavaScript critico) che verranno probabilmente utilizzate dalla pagina, mentre il server è impegnato a generare la risorsa principale.

Per saperne di più, consulta Caricamenti di pagina più rapidi utilizzando il tempo di attesa del server con Early Hints.

Problema di Chromium: 40222701.

Nascondere la colonna Waterfall

Ora puoi nascondere la colonna 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 check_box_outline_blank A cascata nel menu a discesa.

Problema di Chromium: 40574989.

Miglioramenti del riquadro Prestazioni

Questa versione introduce diversi miglioramenti al pannello Rendimento.

Acquisire le statistiche del selettore CSS

Il riquadro Rendimento riceve una nuova impostazione che consente di acquisire le statistiche del selettore CSS per gli eventi Ricalcola stile a esecuzione prolungata.

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

Problema di Chromium: 324282954.

Modificare l'ordine e nascondere le tracce

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

Per accedere alla modalità di configurazione, fai clic sul pulsante Modifica Modifica a sinistra del nome della traccia. Quindi, fai clic su arrow_upward su o arrow_downward giù per spostare la traccia o fai clic su visibility_off per nasconderla. Al termine, fai clic sul pulsante Fine Segno di spunta a destra del nome della traccia.

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

Problema di Chromium: 311439339.

Ignorare gli elementi di conservazione nel riquadro Memoria

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

Per ignorare una ritenuta, seleziona un oggetto e, nella sezione Ritenuta, fai clic con il tasto destro del mouse su una ritenuta e seleziona Ignora questa ritenuta dal menu a discesa. I dispositivi di ritenuta 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.

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 c'è il supporto deprecato per il plug-in Publisher Ads, che è diventato obsoleto in questa versione.

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:

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

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.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema di DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet a @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti di DevTools.

Novità di DevTools

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