Novità di DevTools, Chrome 128

Sofia Emelianova
Sofia Emelianova
GitHub

Gli insight della console di Gemini saranno disponibili nella maggior parte dei paesi europei

Questa versione offre il supporto degli approfondimenti della console di Gemini nella maggior parte dei paesi europei.

Elenco dei nuovi paesi europei supportati

Austria, Belgio, Bulgaria, Cipro, Croazia, Danimarca, Estonia, Finlandia, Francia, Germania, Grecia, Irlanda, Islanda, Italia, Lettonia, Liechtenstein, Lituania, Lussemburgo, Malta, Norvegia, Paesi Bassi, Polonia, Portogallo, Regno Unito, Romania, Slovacchia, Slovenia, Spagna e Ungheria.

Se ti trovi in uno di questi paesi, ora puoi chiedere a Gemini di fornire approfondimenti direttamente nella console, in modo da comprendere meglio gli errori e gli avvisi.

Un insight di Gemini per un errore nella console.

Aggiornamenti del riquadro sul rendimento

Questo aggiornamento apporta alcuni miglioramenti al riquadro Rendimento.

Canale Enhanced Network

Il canale Rete nel riquadro Rendimento è stato migliorato per mostrare in anteprima le informazioni più importanti, ad esempio una durata più dettagliata e l'albero dell'iniziatore della rete, nonché per fornire una maggiore chiarezza sugli indicatori visivi e sui colori. Pertanto, non devi più passare dal riquadro Rete alla scheda Rendimento > Riepilogo. Inoltre, se devi ancora passare al riquadro Rete, abbiamo semplificato e velocizzato la procedura.

Ora il monitoraggio della rete esegue le seguenti operazioni:

  • Mostra una legenda dei colori per i tipi di richiesta.
  • Contrassegni le richieste che bloccano il rendering con triangoli rossi nell'angolo in alto a destra.
  • Mostra con una freccia l'iniziatore della richiesta al momento della selezione. Questo ti aiuta a comprendere la struttura di avvio della rete che in precedenza era disponibile solo nel riquadro Rete.
  • Al passaggio del mouse, una descrizione comando aggiornata ora mostra informazioni sui tempi strutturati, tra cui lo stato di blocco del rendering e le eventuali modifiche alla priorità.
  • La scheda Riepilogo ora mostra anche una suddivisione dei tempi in una colonna a destra.

La traccia di rete migliorata con una legenda dei colori, descrizioni comando, indicatori di blocco del rendering e tempistiche nella scheda Riepilogo.

Inoltre, ora puoi fare clic con il tasto destro del mouse sulla richiesta nella traccia o sul relativo URL nella scheda Riepilogo e selezionare Mostra nel riquadro Rete dal menu a discesa. DevTools ti reindirizzerà al riquadro Rete e evidenzierà la richiesta che stai cercando nella tabella.

Il menu con il tasto destro del mouse per la richiesta con l'opzione "Mostra nel riquadro Rete".

Personalizza i dati sulle prestazioni con l'API estensibilità

Questa versione introduce il supporto per i dati delle estensioni nel riquadro Rendimento. Ora puoi aggiungere canali personalizzati con eventi e descrizioni comando all'analisi del rendimento, dettagli nella scheda Riepilogo e altro ancora. Questa funzionalità può essere utile per gli sviluppatori di framework, librerie e applicazioni complesse con strumentazione personalizzata.

Esamina un esempio di canale personalizzato in questa pagina dimostrativa. In Prestazioni > Impostazioni di acquisizione, attiva la Dati delle estensioni. Avvia una registrazione dell'esecuzione, fai clic su Aggiungi nuovo Corgi nella pagina demo e interrompi la registrazione. Nella traccia viene visualizzato un canale personalizzato contenente eventi con descrizioni comando e dettagli personalizzati nella scheda Riepilogo.

Un canale personalizzato nel riquadro Rendimento.

In breve, per estendere i dati sulle prestazioni, passa una struttura specifica ai parametri measureOption.detail o markOption.detail delle chiamate API performance.measure() o performance.mark().

Dettagli nel canale Tempi

Se sei uno sviluppatore web che utilizza la parte Tempi utenti dell'API Performance per aggiungere voci alla traccia Tempi, ora puoi visualizzare i dettagli arbitrari nella scheda Riepilogo per gli eventi mark e measure e i relativi timestamp.

Un evento personalizzato nel monitoraggio Tempi con timestamp e dettagli.

Problema di Chromium: 345418915.

Copia tutte le richieste elencate nel riquadro Rete

Anziché copiare l'intero log di rete, il riquadro Rete ora consente di applicare filtri e copiare solo le richieste elencate.

Copia le opzioni solo per le richieste elencate.

Snapshot dell'heap più veloci con tag HTML denominati e meno disordine

Gli snapshot heap nel riquadro Memoria diventano ancora più veloci, ora hanno gli oggetti raggruppati in base a tag HTML denominati, corrispondono meglio alla semantica del linguaggio JavaScript mostrando meno oggetti interni e includono sempre valori numerici.

Oggetti raggruppati per tag HTML denominati.

Le prestazioni dell'impostazione Includi valori numerici nell'acquisizione sono state migliorate, attivate per impostazione predefinita e rimosse dal riquadro Memoria.

Per includere manualmente oggetti interni nello snapshot, attiva prima Impostazioni > Esperimenti > Mostra l'opzione per esporre gli elementi interni negli snapshot dell'heap, quindi attiva la Esponi gli elementi interni (...) nel riquadro Memoria.

Problemi relativi a Chromium: 41490040, 343341610, 42203857.

Apri il riquadro delle animazioni per acquisire animazioni e modificare @keyframes in tempo reale

Il riquadro Animazioni ora include le seguenti azioni:

  • Acquisisce le animazioni già in corso quando apri il riquadro, quindi non devi aggiornare la pagina per acquisire le animazioni.
  • Supporta la modifica in tempo reale di @keyframes. In altre parole, aggiorna l'animazione acquisita man mano che modifichi la sezione @keyframes in Elementi > Stili.

Guarda entrambe le funzionalità in azione nel video seguente.

Problema di Chromium: 352718055.

Lighthouse 12.1.0

Il pannello Lighthouse ora esegue Lighthouse 12.1.0.

Questo aggiornamento apporta una serie di modifiche, tra cui la rimozione della vecchia metrica First Meaningful Paint (FMP) a favore di Largest Contentful Paint (LCP). Consulta l'elenco completo delle modifiche.

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

Problema relativo a Chromium: 772558.

Accessibilità

Questa versione include i seguenti miglioramenti dell'accessibilità:

  • Premere Tab dopo il completamento automatico nel campo di modifica delle espressioni dinamiche per spostare lo stato attivo al punto focale successivo. In precedenza, applicava il rientro al testo.
  • Se fai clic su un componente di ridimensionamento, lo stato attivo viene attivato e puoi spostarlo con i tasti Freccia destra e Freccia sinistra.
  • Uno screen reader annuncia ora il campo di modifica Aggiungi espressione su smartwatch in Origini e Elimina espressione su smartwatch è ora chiaramente visibile quando si naviga con una tastiera.

Problemi relativi a Chromium: 349939551, 343942719, 349334243, 349428374.

Varie in evidenza

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

  • Rendimento:
    • Traccia Rete: aggiunti eventi di connessione WebSocket 331351979.
    • Il riquadro Prestazioni ora ingrandisce correttamente l'attività del thread principale più frequente 345599356.
    • È stato corretto un bug relativo al caricamento di tipi di file di traccia errati. Ora viene impedito il caricamento di qualsiasi tipo, ad eccezione di .json o .gz 349864878 corretti.
  • Elementi > Stili:
    • Il menu a discesa delle unità nei valori della proprietà lunghezza è stato ritirato 41495618.
    • È stato corretto il problema di risoluzione delle proprietà attive per le regole at nidificate 346732737.
    • Le sezioni di @position-try inattive ora non sono selezionabili 40246493.
  • Applicazione:
    • Cookie: è stato corretto un bug che non aggiornava i cookie al clic su Aggiorna 348683488.
    • Spazio di archiviazione locale: ora puoi ordinare per chiavi in ordine alfabetico 341129585.

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