Novità di DevTools, Chrome 128

Gli Approfondimenti della console di Gemini vengono implementati nella maggior parte dei paesi europei

Questa versione supporta gli 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 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. Di conseguenza, non dovrai 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 l'iniziatore della richiesta con una freccia al momento della selezione. In questo modo puoi comprendere la struttura ad albero degli iniziatori di 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.

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 della 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 estensione

Questa versione introduce il supporto dei dati delle estensioni nel riquadro Rendimento. Ora puoi aggiungere canali personalizzati 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 strumenti di misurazione personalizzati.

Guarda un esempio di canale personalizzato in questa pagina dimostrativa. In Prestazioni > Impostazioni di acquisizione, attiva la check_box Dati delle estensioni. Avvia una registrazione del rendimento, fai clic su Aggiungi nuovi corgi nella pagina di demo e poi interrompi la registrazione. Nella traccia viene visualizzato un canale personalizzato contenente 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 nel canale Tempi

Se sei uno sviluppatore web che utilizza la parte relativa alla temporizzazione utente dell'API Performance per aggiungere voci al canale Temporizzazioni, 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ù rapidi con tag HTML denominati e meno ingombri

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.

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

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

Problemi di Chromium: 41490040, 343341610, 42203857.

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

Il riquadro Animazioni ora esegue le seguenti operazioni:

• 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 mentre 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 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 dal vivo, lo stato attivo viene spostato sul punto di attivazione successivo. In precedenza, il testo veniva rientrato.
• Se fai clic su un dispositivo di ridimensionamento, questo viene attivato e puoi spostarlo con i tasti Freccia destra e Freccia sinistra.
• Ora uno screen reader annuncia il campo di modifica Aggiungi espressione di guardia in Origini e Elimina espressione di guardia è ora chiaramente visibile quando navighi con una tastiera.

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

Altri punti salienti

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

• Rendimento:
  • Canale Network: sono stati aggiunti gli eventi di connessione WebSocket 331351979.
  • Il riquadro Rendimento ora aumenta correttamente lo zoom sull'attività del thread principale più impegnata 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 @position-try non attive non sono più selezionabili 40246493.
• Richiesta:
  • 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 di anteprima

Valuta la possibilità di utilizzare 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 i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.

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

Novità di DevTools

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