Miglioramenti al riquadro Prestazioni
Questa versione introduce una serie di miglioramenti al pannello Rendimento.
Nuovi approfondimenti sul rendimento
La scheda Rendimento > Approfondimenti riceve nuovi approfondimenti:
- HTTP moderno che evidenzia le richieste che utilizzano il vecchio protocollo HTTP/1.1.
- Utilizza durate della memorizzazione nella cache efficienti che evidenziano le richieste che potrebbero trarre vantaggio da durate della memorizzazione nella cache più lunghe e velocizzare il tempo di caricamento del tuo sito web.
- Visualizzazione dei caratteri che mostra il risparmio di tempo stimato se ottimizzi
font-display.
Fai clic per evidenziare
Ora puoi fare clic sugli elementi nelle tabelle Riepilogo, Dal basso verso l'alto, Albero delle chiamate e Log eventi per mantenere gli eventi corrispondenti evidenziati nella traccia e oscurare il resto mentre esplori la traccia delle prestazioni.
Tempi del server nel riepilogo delle richieste di rete
La scheda Riepilogo nel riquadro Rendimento ora mostra i tempi del server per le richieste di rete che implementano tecnologie di rendering lato server.
Il riquadro Rendimento prende i dati dall'intestazione Server-Timing.
Filtrare i cookie in "Privacy e sicurezza"
La tabella nella sezione Privacy e sicurezza > Privacy > Cookie di terze parti viene filtrata, in modo da trovare più rapidamente i cookie che ti interessano.
Dimensioni in unità kB nelle tabelle di tutti i riquadri
Per mantenere le stesse unità all'interno dello stesso contesto, le tabelle nei riquadri Rete e Memoria e la tabella 1p / 3p in Rendimento > Riepilogo ora mostrano tutte le dimensioni in kB. In questo modo, puoi confrontare direttamente i numeri nella stessa colonna e nei vari pannelli, anziché tenere d'occhio le unità MB, kB e B.
Il completamento automatico supporta corner-shape e corner-*-shape in Elementi > Stili
Il completamento automatico in Elementi > Stili ora può suggerire i valori corrispondenti per le proprietà corner-shape e corner-*-shape.
Problema di Chromium: 402346406.
Sperimentale: evidenziazione dei problemi relativi a elementi e attributi nel DOM
Con questa nuova funzionalità sperimentale, il riquadro Elementi ora può evidenziare i problemi relativi agli elementi DOM o agli attributi con una sottolineatura rossa ondulata. Passa il mouse sopra questi elementi o attributi per visualizzare un suggerimento con un link all'errore corrispondente nel riquadro Problemi.
Il riquadro Elementi attualmente evidenzia i discendenti non validi di <select>, le definizioni ARIA non corrispondenti e gli attributi ARIA non validi.
Problema di Chromium: 378738916.
Lighthouse 12.5.0
Il riquadro Lighthouse ora esegue Lighthouse 12.5.0.
La novità più importante di questa versione è che legacy-javascript ora utilizza Baseline anziché esmodules. 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: 40543651.
Punti salienti vari
Di seguito sono riportate alcune correzioni e alcuni miglioramenti degni di nota in questa release:
- Rendimento > Approfondimenti > Albero delle dipendenze di rete: ora mostra il tempo per tutte le richieste di rete nell'albero di rete (400708304).
- Albero delle dipendenze di rete: ora mostra l'ora per tutte le richieste di rete nell'albero di rete (400708304).
- Animazioni: è stato corretto un bug che causava la visualizzazione di elementi separati nel riquadro Memoria a causa delle animazioni acquisite 400635410.
- Registratore: ora utilizza la stessa finestra di dialogo di conferma dell'incollatura del codice quando si esegue la registrazione per la prima volta.
- Livelli: ora mostra il numero totale di livelli e la memoria totale per tutti i livelli visibili nella barra di stato in basso.
- Memoria: l'inizializzazione dello snapshot dell'heap è stata migliorata parallelizzando le attività tra due worker anziché utilizzarne uno (42203857).
- Problemi: ora segnala gli errori CORS di accesso alla rete locale (LNA) (395895368).
- Accessibilità:
- Descrizioni comando: ora vengono visualizzate alla pressione dei tasti di scelta rapida anziché quando viene impostato lo stato attivo (396311936).
- Elementi > Stili: ora è possibile interagire con la funzione
var()tramite tastiera, il che significa che puoi selezionare--custom-propertye premere Invio per andare alla destinazione del link (401212692).
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 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.
- Aggiornamenti del server MCP di DevTools
- Condivisione migliorata delle tracce
- Supporto per @starting-style
- Widget dell'editor per la visualizzazione: muratura
- Lighthouse 13
- Suggerimenti per il codice da Gemini
- Miglioramenti per il server MCP di DevTools
- Accesso più rapido all'assistenza dell'AI
- Eseguire il debug della traccia completa delle prestazioni con Gemini
- Attiva/disattiva orientamento del riquadro a scomparsa
- Programma per gli sviluppatori di Google
- Altri momenti salienti
- Chrome DevTools (MCP) per l'agente AI
- Eseguire il debug dell'albero delle dipendenze di rete con Gemini
- Esportare le chat con Gemini
- Configurazione delle tracce persistenti nel riquadro Rendimento
- Filtra le richieste di rete protette da IP
- Elementi > La scheda Layout aggiunge il supporto del layout a griglia
- Lighthouse 12.8.2
- Altri momenti salienti
- Esegui il debug di altri approfondimenti con Gemini
- Emulare l'intestazione "Save-Data" in "Condizioni di rete"
- Visualizzare lo stato di Baseline nella descrizione comando di una proprietà CSS
- Eseguire l'override dei fattori di forma nei suggerimenti client dello user agent
- Lighthouse 12.8.0
- Altri momenti salienti
- Chrome DevTools più affidabile e produttivo
- Caricare immagini nell'assistenza AI per lo stile
- Aggiungere intestazioni delle richieste alla tabella in Rete
- Scopri i momenti salienti di Google I/O 2025
- Altri momenti salienti
- Miglioramenti al pannello del rendimento
- Origini precollegate nell'approfondimento "Albero delle dipendenze di rete"
- Tempi di risposta e reindirizzamento del server nell'approfondimento "Latenza richiesta documento"
- Reindirizzamenti nel riepilogo delle richieste di rete
- Riduzione del rumore nella traccia delle prestazioni
- Funzionalità "Disattiva campioni di JavaScript" ritirata
- Parametro di precisione della geolocalizzazione in Sensori
- Miglioramenti al riquadro degli elementi
- Eseguire il debug più facilmente di valori CSS complessi
- Supporto della funzione@in Elementi > Stili
- Miglioramenti al riquadro Rete
- has-request-header filter
- Socket diretti nelle app web isolate
- Altri momenti salienti
- Accessibilità
- Edizione Google I/O 2025
- Modificare e salvare le modifiche CSS nel workspace con Gemini
- Connettere una cartella dello spazio di lavoro e salvare le modifiche nei file di origine
- Chiedere a Gemini informazioni sulle informazioni sulle prestazioni
- Annotare i risultati delle prestazioni con Gemini
- Aggiungere screenshot alle chat con Gemini
- Nuovi approfondimenti nel riquadro Prestazioni
- JavaScript duplicato
- JavaScript precedente
- Le speculazioni ora supportano i tag delle regole
- Lighthouse 12.6.0
- Altri momenti salienti
- Accessibilità
- Miglioramenti al pannello del rendimento
- Nuovi approfondimenti sul rendimento
- Fai clic per evidenziare
- Tempi del server in Riepilogo delle richieste di rete
- Filtrare i cookie in "Privacy e sicurezza"
- Dimensioni in unità kB nelle tabelle dei vari riquadri
- Il completamento automatico supporta la forma dell'angolo e la forma dell'angolo-* in Elementi > Stili
- Sperimentale: evidenziazione dei problemi relativi a elementi e attributi nel DOM
- Lighthouse 12.5.0
- Altri momenti salienti
- Miglioramenti al pannello del rendimento
- Link all'origine e allo script per le chiamate di profilo e di funzione in Performance
- Supporto dei dati di campo LCP per fase
- Insight sull'albero delle dipendenze di rete
- Durata anziché tempo totale e autonomo nel riepilogo
- Evidenziazione dello stack più pesante
- Stati vuoti migliorati per vari riquadri
- Visualizzazione ad albero dell'accessibilità in Elements
- Lighthouse 12.4.0
- Altri momenti salienti
- Pannello Privacy e sicurezza
- Miglioramenti al pannello del rendimento
- Preimpostazioni calibrate per la limitazione della CPU
- Selezionare diversi eventi di rendimento nella stessa chat AI
- Evidenziazione dei dati proprietari e di terze parti nel rendimento
- Dati dei campi nelle descrizioni comando e negli approfondimenti dei marcatori
- Insight sull'adattamento dinamico del contenuto forzato
- Approfondimento "Ottimizza le dimensioni del DOM"
- Estendere la traccia del rendimento con console.timeStamp
- Miglioramenti al riquadro degli elementi
- Valori in tempo reale degli stili animati
- Supporto per la pseudo-classe :open e vari pseudo-elementi
- Copia tutti i messaggi della console
- Unità di byte nel riquadro Memoria
- Altri momenti salienti
- Cronologia della chat AI persistente
- Miglioramenti al pannello del rendimento
- Approfondimento sulla pubblicazione delle immagini
- Navigazione da tastiera classica e moderna
- Ignorare gli script non pertinenti nel grafico a fiamma
- Indicatore della sequenza temporale ed evidenziazione dell'intervallo al passaggio del mouse
- Impostazioni di limitazione consigliate
- Indicatori di sincronizzazione in una sovrapposizione
- Analisi dello stack delle chiamate JS nel riepilogo
- Impostazioni dei badge spostate nel menu di Elementi
- Nuovo riquadro "Novità"
- Lighthouse 12.3.0
- Altri momenti salienti
- Eseguire il debug delle richieste di rete, dei file di origine e delle tracce delle prestazioni con Gemini
- Visualizzare la cronologia della chat AI
- Gestire lo spazio di archiviazione delle estensioni in Applicazione > Spazio di archiviazione
- Miglioramenti delle prestazioni
- Fasi di interazione nelle metriche in tempo reale
- Informazioni sul rendering di blocco nella scheda Riepilogo
- Supporto per gli eventi scheduler.postTask e le relative frecce di iniziatore
- Miglioramenti al riquadro Animazioni e alla scheda Elementi > Stili
- Passare da Elementi > Stili ad Animazioni
- Aggiornamenti in tempo reale nella scheda Calcolati
- Calcolare l'emulazione della pressione in Sensori
- Oggetti JS con lo stesso nome raggruppati per origine nel riquadro Memoria
- Nuovo look per le impostazioni
- Il riquadro Informazioni sulle prestazioni è deprecato e rimosso da DevTools
- Altri momenti salienti
- Eseguire il debug di CSS con Gemini
- Controllare le funzionalità di AI in una scheda delle impostazioni dedicata
- Miglioramenti al pannello del rendimento
- Annotare e condividere i risultati del rendimento
- Ottenere informazioni sul rendimento direttamente nel riquadro Prestazioni
- Individuare più facilmente gli spostamenti eccessivi del layout
- Individuare le animazioni non composite
- La concorrenza hardware passa ai sensori