Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di DevTools, Chrome 125

Sofia Emelianova

Comprendi meglio errori e avvisi nella console con Gemini

Questa versione di Chrome integra le funzionalità di IA generativa nella console DevTools per consentirti di comprendere meglio gli errori e gli avvisi riscontrati.

Per ricevere una spiegazione creata con l'IA di un errore o un avviso, fai clic sul pulsante Comprendi questo errore (avviso) accanto al messaggio nella console e segui le istruzioni.

La spiegazione di un errore creata con l'IA.

Per saperne di più, consulta Comprendere meglio errori e avvisi con l'IA.

Supporto di `@position-try` regole in Elementi > Stili

Per aiutarti a eseguire il debug del posizionamento dell'ancoraggio 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.

Il prima e dopo il supporto delle regole CSS @position-try.

Per scoprire di più, consulta Eseguire il tethering tra gli elementi con il posizionamento di ancoraggio CSS.

Problema di Chromium: 40279608.

Miglioramenti al riquadro Origini

Questa versione introduce diversi miglioramenti al riquadro Origini.

Configura la stampa di visualizzazione automatica e la chiusura a parentesi quadra

Ora puoi attivare o disattivare la copia automatica dei dati e la chiusura delle parentesi per l'Editor in Origini. La stampa piuttosto rende i file minimizzati leggibili. La chiusura a 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 e check_box Stampa automaticamente il rendering delle origini minimizzate in Impostazioni Impostazioni > Preferenze > Origini.

Problemi di Chromium: 40865010, 324314570.

Le promesse rifiutate gestite vengono riconosciute come rilevate

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

In altre parole, quando è attiva l'opzione Origini > Punti di interruzione > check_box Metti in pausa in caso di eccezioni non rilevate, il debugger non si ferma su istruzioni simili alle seguenti:

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

Il prima e il dopo aver riconosciuto i rifiuti colti.

Problema di Chromium: 40283993.

Cause di errori nella console

La console ora mostra catene di cause di errori nell'analisi dello stack, se presenti.

Per semplificare il debug, puoi specificare le cause degli errori quando rilevi e ripeti gli errori. Man mano che la console percorre la catena di cause, visualizza ogni serie di errori con un prefisso Caused by:, in modo che tu possa ancora vedere l'errore originale.

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

Problema di Chromium: 40182832.

Miglioramenti al riquadro Network

Questa versione introduce diversi miglioramenti al riquadro Rete.

Ispeziona le intestazioni Early Hint

Le intestazioni Early Hint hanno una sezione dedicata nella scheda Intestazioni della richiesta del riquadro Rete. In precedenza, potevi trovare le intestazioni pertinenti nella sezione Intestazioni delle risposte.

Early Hint è 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 sulle risorse secondarie critiche (ad esempio, un foglio di stile o JavaScript critico) o sulle origini che verranno probabilmente utilizzate dalla pagina mentre il server è impegnato a generare la risorsa principale.

Il prima e il dopo l'aggiunta di una sezione dedicata per i primi suggerimenti.

Per saperne di più, consulta Caricamenti di pagine più rapidi grazie al tempo di riflessione del server con i suggerimenti iniziali.

Problema di Chromium: 40222701.

Nascondere la colonna con struttura a cascata

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

Prima e dopo l'aggiunta dell'opzione per nascondere la colonna con struttura a cascata.

Problema di Chromium: 40574989.

Miglioramenti al riquadro Prestazioni

Questa versione introduce diversi miglioramenti al riquadro Prestazioni.

Acquisire le statistiche del selettore CSS

Il riquadro Rendimento dispone di una nuova impostazione per consentirti di acquisire le statistiche del selettore CSS per gli eventi Ricalcola stile a lunga esecuzione.

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 e sulla percentuale di non corrispondenze dei percorsi lenti per ciascun selettore.

Il prima e il dopo l'aggiunta delle statistiche del selettore.

Problema di Chromium: 324282954.

Cambia ordine e nascondi le tracce

Il riquadro Rendimento dispone di una nuova modalità di configurazione che consente di modificare l'ordine dei canali e nasconderli.

Per attivare la modalità di configurazione, fai clic sul pulsante Modifica Modifica a sinistra del nome del canale. Quindi fai clic su arrow_upward verso l'alto o arrow_downward per spostare la traccia oppure fai clic su visibility_off Nascondi. Al termine, fai clic sul pulsante Fine Verifica a destra del nome della traccia.

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

Problema di Chromium: 311439339.

Ignora gli assistente in sito nel riquadro Memoria

Ora puoi ignorare gli assistente in sito nelle istantanee heap acquisite con il riquadro Memoria.

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

Prima e dopo l'aggiunta di un'opzione per ignorare gli assistente in sito.

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

Problema di Chromium: 327337527.

Lighthouse 11.7.1

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

Tra le modifiche degne di nota c'è il supporto obsoleto per il plug-in Publisher Ads, che è diventato obsoleto in questa versione.

Il prima e dopo l'aggiunta, rimuovendo il supporto del plug-in di annunci publisher.

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

Problema di Chromium: 772558.

Varie in evidenza

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

Lo stato dell'anteprima del riquadro Registratore è ora ufficialmente esaurito (329271496).
Ora la console non mostra un errore quando un formattatore personalizzato restituisce 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 nelle espressioni regolari.
La scheda Rete > Cookie è stato corretto un bug relativo alla mappatura dei cookie esenti ai cookie di risposta (41491846).
La scheda Elementi > Stili ora funziona come segue:
- Mostra le regole ereditate completamente sovraccaricate con proprietà personalizzate (41489874).
- Evidenzia il valore applicato in light-dark() in base al tema a colori (331123816).

Scarica i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o beta come browser di sviluppo predefinito. Questi canali in anteprima ti consentono di accedere alle funzionalità di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.

Inviaci un suggerimento o un feedback tramite crbug.com.
Segnala un problema DevTools utilizzando Altre opzioni > Guida > Segnala i problemi di DevTools in DevTools.
Tweet all'indirizzo @ChromeDevTools.
Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.