Novità di DevTools, Chrome 128

Gli approfondimenti della console con Gemini saranno disponibili nella maggior parte dei paesi europei

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

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.

Aggiornamenti al riquadro Prestazioni

Questo aggiornamento introduce alcuni miglioramenti al pannello Rendimento.

Traccia Enhanced Network

La traccia Rete nel riquadro Rendimento è stata migliorata per mostrare in anticipo informazioni critiche, ad esempio una durata più dettagliata e un albero di iniziatori di rete, e per fornire maggiore chiarezza su segnali visivi e colori. In questo modo, non dovrai più passare dal pannello Rete alla scheda Rendimento > Riepilogo. Inoltre, se devi ancora passare al riquadro Rete, abbiamo semplificato e velocizzato la procedura.

La traccia Network ora esegue le seguenti operazioni:

• Mostra una legenda dei colori per i tipi di richieste.
• Contrassegna le richieste di blocco del rendering con triangoli rossi nell'angolo in alto a destra.
• Mostra l'iniziatore della richiesta dopo la selezione con una freccia. In questo modo puoi comprendere l'albero degli iniziatori di rete, che in precedenza era disponibile solo nel riquadro Rete.
• Al passaggio del mouse, una descrizione comando rielaborata ora mostra informazioni strutturate sui tempi, inclusi lo stato di blocco del rendering e le modifiche alla priorità, se presenti.
• La scheda Riepilogo ora mostra anche una suddivisione dei tempi in una colonna a destra.

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 ed evidenzierà la richiesta che stai cercando nella tabella.

Personalizzare i dati sul rendimento con l'API di estensibilità

Questa versione introduce il supporto per i dati delle estensioni nel riquadro Prestazioni. Ora puoi aggiungere tracce personalizzate con eventi e descrizioni delle descrizioni comando alla traccia del rendimento, dettagli alla scheda Riepilogo, e altro ancora. Questa funzionalità può essere utile per gli sviluppatori di framework, librerie e applicazioni complesse con strumentazione personalizzata.

Vedi un esempio di traccia personalizzata in questa pagina dimostrativa. In Rendimento > Impostazioni di acquisizione, attiva check_box Dati delle estensioni. Avvia una registrazione delle prestazioni, fai clic su Aggiungi nuovo Corgi nella pagina demo, quindi interrompi la registrazione. Nella traccia vedrai una traccia personalizzata che contiene eventi con descrizioni comando e dettagli personalizzati nella scheda Riepilogo.

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

Dettagli nella traccia Timing

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

Problema di Chromium: 345418915.

Copia tutte le richieste elencate nel riquadro Rete

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

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

Le istantanee heap nel riquadro Memoria sono ancora più veloci, ora gli oggetti sono raggruppati per tag HTML denominati, corrispondono meglio alla semantica del linguaggio JavaScript mostrando meno oggetti interni e includono sempre valori numerici.

Il rendimento dell'impostazione check_box Includi valori numerici nell'acquisizione è stato velocizzato, attivato per impostazione predefinita e rimosso dal riquadro Memoria.

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

Problemi di Chromium: 41490040, 343341610, 42203857.

Apri il riquadro Animazioni per acquisire animazioni e modificarle @keyframes in tempo reale

Il riquadro Animazioni ora esegue le seguenti operazioni:

• Acquisisce le animazioni già in corso quando apri il riquadro, in modo da non dover aggiornare la pagina per acquisirle.
• Supporta la modifica in tempo reale di @keyframes. In altre parole, aggiorna l'animazione acquisita mentre modifichi la sezione @keyframes in Elementi > Stili.

Guarda entrambe le funzionalità in azione nel seguente video.

Problema di Chromium: 352718055.

Lighthouse 12.1.0

Il riquadro Lighthouse ora esegue Lighthouse 12.1.0.

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

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.

Accessibilità

Questa versione include i seguenti miglioramenti dell'accessibilità:

• Se premi Tab dopo il completamento automatico nel campo di modifica delle espressioni live, lo stato attivo viene spostato sul punto attivo successivo. In precedenza, il testo veniva rientrato.
• Se fai clic su un ridimensionatore, questo viene selezionato e puoi spostarlo con i tasti Freccia destra e Freccia sinistra.
• Ora uno screen reader annuncia il campo di modifica Aggiungi espressione di controllo in Origini e Elimina espressione di controllo è ora chiaramente visibile quando si naviga con una tastiera.

Problemi di Chromium: 349939551, 343942719, 349334243, 349428374.

Punti salienti vari

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

• Rendimento:
  • Traccia Rete: sono stati aggiunti eventi di connessione WebSocket 331351979.
  • Il riquadro Rendimento ora esegue correttamente lo zoom sull'attività del thread principale più intensa 345599356.
  • È stato corretto un bug relativo al caricamento di tipi di file di traccia errati. Ora impedisce il caricamento di qualsiasi tipo, ad eccezione di .json o .gz 349864878.
• Elementi > Stili:
  • Il menu a discesa delle unità nei valori delle proprietà di lunghezza è ora ritirato 41495618.
  • È stato risolto il problema relativo alla risoluzione delle proprietà attive per le regole @ nidificate 346732737.
  • Le sezioni @position-try non attive ora sono visualizzate in grigio 40246493.
• Applicazione:
  • Cookie: è stato corretto un bug che non aggiornava i cookie quando si faceva clic su Aggiorna 348683488.
  • Archiviazione locale: ora puoi ordinare le 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, 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.