Novità di DevTools, Chrome 128

Sofia Emelianova
Sofia Emelianova

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, Cechia, Germania, Danimarca, Estonia, Finlandia, Francia, Grecia, Croazia, Irlanda, Islanda, Italia, Liechtenstein, Lituania, Lussemburgo, Lettonia, Malta, Paesi Bassi, Norvegia, Polonia, Portogallo, Regno Unito, Romania, Svezia, Slovenia, Slovacchia, Svizzera.

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

Un insight di Gemini per un errore nella console.

Aggiornamenti al riquadro del rendimento

Questo aggiornamento apporta alcuni miglioramenti al riquadro Rendimento.

Percorso di rete avanzato

La traccia Rete nel riquadro Rendimento è stata migliorata per mostrare in primo piano informazioni fondamentali, ad esempio durata e struttura ad albero di avvio della rete più dettagliate, nonché per fare chiarezza su segnali e colori visivi. Non devi quindi passare dal riquadro Rete al riquadro Rendimento > Riepilogo. Inoltre, se devi ancora passare al riquadro Rete, l'abbiamo reso più semplice e veloce.

La traccia Rete ora svolge le seguenti operazioni:

  • Mostra una legenda dei colori per i tipi di richiesta.
  • Contrassegna le richieste di blocco del 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 rielaborata ora mostra informazioni sulle tempistiche strutturate, 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 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 porta al riquadro Rete e evidenzia la richiesta che stai cercando nella tabella.

Il menu di scelta rapida della richiesta con il riquadro "Mostra in 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 Rendimento > Acquisisci impostazioni, attiva la check_box Dati estensione. Avvia una registrazione dell'esecuzione, fai clic su Aggiungi nuovo Corgi nella pagina demo e interrompi la registrazione. Nella traccia vedrai un canale personalizzato che contiene eventi con descrizioni comando e dettagli personalizzati nella scheda Riepilogo.

Una traccia personalizzata 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 nella traccia 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 relativo a 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 check_box Includi valori numerici nell'acquisizione sono state velocizzate, attivate per impostazione predefinita e rimosse dal riquadro Memoria.

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

Problemi relativi a Chromium: 41490040, 343341610, 42203857.

Apri il riquadro Animazioni per acquisire animazioni e modificare @keyframes dal vivo

Il riquadro Animazioni ora include le seguenti azioni:

  • Acquisisce animazioni già in corso quando apri il riquadro, in modo da non dover 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 seguente video.

Problema relativo a Chromium: 352718055.

Lighthouse 12.1.0

Nel riquadro Lighthouse ora è in esecuzione Lighthouse 12.1.0.

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

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.

Accessibilità

Questa versione presenta i seguenti miglioramenti all'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 degni di nota in 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 impedisce il caricamento di qualsiasi tipo tranne .json o .gz 349864878 corretti.
  • Elementi > Stili:
      .
    • Il menu a discesa delle unità nei valori della proprietà Lunghezza è ora obsoleto 41495618.
    • È stata corretta la risoluzione delle proprietà attive per le regole at-rule 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 e su 348683488.
    • Spazio di archiviazione locale: ora puoi ordinare in ordine alfabetico in base alle chiavi 341129585.

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.