Novità di DevTools, Chrome 125

Sofia Emelianova
Sofia Emelianova
GitHub

Comprendi meglio errori e avvisi nella console con Gemini

Questa versione di Chrome introduce funzionalità di IA generativa nella console DevTools, allo scopo di aiutarti a comprendere meglio gli errori e gli avvisi riscontrati.

Per ottenere una spiegazione di un errore o di un avviso creata con l'IA, fai clic sul pulsante Lampadina scintilla. 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'AI.

Supporto di @position-try regole in Elementi > Stili

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

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

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

Problema relativo a Chromium: 40279608.

Miglioramenti al riquadro Origini

Questa versione introduce diversi miglioramenti al riquadro Origini.

Configura il disegno automatico e la chiusura delle parentesi

Ora puoi attivare o disattivare la funzionalità di chiusura automatica delle bozze e la chiusura delle parentesi 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 check_box Parentesi chiuse automatiche e check_box Formatta automaticamente il codice delle fonti minimizzate in Impostazioni Impostazioni > Preferenze > Fonti.

Prima e dopo l'aggiunta di nuove impostazioni per il disegno automatico e la chiusura delle parentesi.

Problemi relativi a 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() a due argomenti.

In altre parole, quando Fonti > Punti di interruzione > check_box L'opzione Metti in pausa in caso di eccezioni non rilevate è attivata; il debugger non mette in pausa istruzioni simili alla seguente:

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

Prima e dopo aver individuato i rifiuti.

Problema relativo a Chromium: 40283993.

Cause degli errori nella console

Ora la console mostra eventuali catene di cause degli errori nell'analisi dello stack.

Per semplificare il debug, puoi specificare le cause degli errori quando rilevi e modifichi gli errori. Man mano che la console segue la catena delle cause, stampa ogni stack 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 "Causa da".

Problema relativo a Chromium: 40182832.

Miglioramenti al riquadro Rete

Questa versione introduce diversi miglioramenti al riquadro Rete.

Ispeziona le intestazioni Early Hints

Le intestazioni Early Hints hanno una sezione dedicata nella scheda Intestazioni della richiesta del riquadro Network. In precedenza, le intestazioni pertinenti erano disponibili nella sezione Intestazioni delle risposte.

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.

Prima e dopo l'aggiunta di una sezione dedicata per i suggerimenti iniziali.

Per ulteriori informazioni, consulta Caricamenti delle pagine più rapidi utilizzando il tempo di riflessione del server con Early Hints.

Problema relativo a Chromium: 40222701.

Nascondi la colonna Struttura a cascata

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

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

Problema relativo a Chromium: 40574989.

Miglioramenti al riquadro Prestazioni

Questa versione introduce diversi miglioramenti al riquadro Rendimento,

Acquisisci le statistiche del selettore CSS

Il riquadro Rendimento presenta una nuova impostazione per consentirti di acquisire le statistiche del selettore CSS per gli eventi Ricalcola stile a lungo termine.

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 con percorsi lenti per ogni selettore.

Le statistiche del selettore prima e dopo l'aggiunta.

Problema relativo a Chromium: 324282954.

Modifica l'ordine e nascondi le tracce

Il riquadro Rendimento presenta 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 Modifica a sinistra del nome della traccia. Quindi, fai clic su arrow_upward su o arrow_downward per spostare la traccia oppure fai clic su visibility_off per nascondere. Al termine, fai clic sul pulsante Fine Verifica a destra del nome della traccia.

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

Problema relativo a Chromium: 311439339.

Ignora 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.

Prima e dopo l'aggiunta di un'opzione per ignorare gli elementi di conservazione.

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

Problema relativo a 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:

  • Lo stato di anteprima del riquadro Registratore non è più ufficialmente disponibile (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 v e d nell'espressione regolare.
  • La Rete > Nella scheda Cookie è stato corretto un bug relativo alla mappatura dei cookie esenti dai cookie di risposta (41491846).
  • Elementi > Nella scheda Stili è ora possibile:
      .
    • Mostra le regole ereditate completamente sovraccaricate con proprietà personalizzate (41489874).
    • Mette in evidenza il valore applicato in light-dark() a seconda del tema a 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 in anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

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

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema di DevTools utilizzando Altre opzioni   Altro > Guida > Segnala un problema di DevTools in DevTools.
  • Invia un tweet all'indirizzo @ChromeDevTools.
  • Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.

Novità di DevTools

Un elenco di tutto ciò che è stato trattato nella serie Novità di DevTools.