Edizione Google I/O 2025
Chrome DevTools avrà una forte presenza al Google I/O di quest'anno. Ci sarà un mix di sessioni dal vivo e registrate.
Per scoprire le nuove funzionalità, segui i seguenti canali:
- Novità di Chrome, 20 maggio 2025 | 15:30 PT
- Fare di più con Chrome DevTools e meno CTRL + TAB
- Debug delle prestazioni in DevTools
Inoltre, non dimenticare di seguire la sessione Novità sul web di Rachel Andrew il 20 maggio 2025 alle 16:30 PT.
Guarda il nostro ultimo video per una rapida panoramica dei nostri ultimi momenti salienti:
Modificare e salvare le modifiche CSS nel tuo workspace con Gemini
Con pochi clic, ora puoi chiedere a Gemini di modificare e correggere il CSS per te e, con una cartella dello spazio di lavoro connessa, salvare le modifiche nei file di origine sul computer.
Gli spazi di lavoro automatici sono una funzionalità sperimentale. Puoi collegare la tua cartella di origine esistente o provare una demo.
Con una cartella dello spazio di lavoro connessa, nel riquadro Elementi, fai clic su Chiedi all'AI, chiedi a Gemini di modificare il CSS, fai clic su Continua per testare le modifiche in tempo reale, poi espandi Modifiche non salvate, fai clic su Applica allo spazio di lavoro, esamina la differenza e fai clic su Salva tutto.
Connettere una cartella dello spazio di lavoro e salvare le modifiche nei file di origine
Ora puoi connettere automaticamente (o manualmente) una cartella dello spazio di lavoro per consentire a DevTools di salvare le modifiche a JavaScript, HTML e CSS nei file di origine memorizzati sul computer.
Scopri come funziona con JavaScript:
Problema di Chromium: 404170628.
Chiedere a Gemini informazioni sugli approfondimenti sul rendimento
Con un clic di un pulsante, ora puoi avviare una chat con Gemini per esaminare e agire in base ai seguenti approfondimenti sul rendimento:
- LCP per fase
- Rilevamento della richiesta LCP
- Richieste di blocco del rendering
- Responsabili delle variazioni del layout
- Latenza di richiesta di download del documento
Non esitare a lasciare un feedback sulla funzionalità all'indirizzo crbug.com/371170842.
Annotare i risultati delle prestazioni con Gemini
Ora puoi chiedere a Gemini di generare annotazioni sugli eventi nella traccia delle prestazioni.
Fai doppio clic su un evento nella traccia Principale, poi fai clic su Genera etichetta accanto al campo di input. Gemini può suggerire un'etichetta in base allo stack trace e al contesto.
Aggiungere screenshot alle chat con Gemini
Nel riquadro Assistenza AI, ora puoi fare clic sul pulsante Fai screenshot per acquisire uno screenshot della pagina e inviarlo alla chat con Gemini.
Puoi utilizzare gli screenshot per fornire un contesto visivo aggiuntivo ai tuoi prompt, ad esempio per verificare se tutti i pulsanti visibili hanno la stessa spaziatura.
Nuovi approfondimenti nel riquadro Prestazioni
Questa versione introduce due nuove informazioni nel riquadro Rendimento: JavaScript duplicato e JavaScript legacy.
JavaScript duplicato
La nuova sezione Rendimento > Approfondimenti > JavaScript duplicato evidenzia nella traccia Rete le richieste di moduli JavaScript duplicati di grandi dimensioni nei bundle, se presenti nella pagina.
Puoi anche fare clic su Visualizza mappa ad albero nella scheda informativa per esplorare le dipendenze JavaScript.
JavaScript precedente
La nuova sezione Rendimento > Approfondimenti > JavaScript legacy evidenzierà nella traccia Rete le richieste di JavaScript legacy, se presenti nella pagina, ad esempio polyfill e trasformazioni che consentono ai browser precedenti di utilizzare nuove funzionalità JavaScript. Tanti non sono però necessari per i browser moderni.
Le speculazioni ora supportano i tag delle regole
Ora Applicazione > Caricamenti speculativi mostra i tag anziché gli URL per i set di regole, se sono presenti.
Problema di Chromium: 393408589.
Lighthouse 12.6.0
Il riquadro Lighthouse ora esegue Lighthouse 12.6.0.
La novità più importante di questa versione è che Lighthouse passa ai controlli degli approfondimenti sul rendimento. Nella categoria Rendimento del report Lighthouse, ora puoi Provare gli approfondimenti.
Consulta anche 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 riportati alcuni miglioramenti e correzioni degni di nota in questa release:
- Rete: è stata aggiunta l'analisi per i formati noti dei tempi del server.
- Ora puoi deselezionare le righe nelle tabelle con Cmd/Ctrl + clic (problema di Chromium: 409474445).
- Rendimento > Approfondimenti > Utilizza durate della cache efficienti ora ignora gli asset con TTL uguale o superiore a 30 giorni.
Accessibilità
Questa versione introduce i seguenti miglioramenti dell'accessibilità:
- Rendimento: le frecce dell'iniziatore nella traccia ora sono più visibili.
- Elementi: ora puoi attivare/disattivare la visualizzazione dell'albero di accessibilità a pagina intera con la scorciatoia A (problema di Chromium: 40888478).
Gli screen reader ora annunciano, tra le altre cose:
- "Copiato negli appunti" quando copi dai blocchi di codice.
- "Applicazione al workspace" quando applichi le modifiche al tuo workspace nella chat dell'assistenza AI.
- "Generazione etichetta" quando chiedi all'AI di generarla in Rendimento > Annotazioni.
- Tieni presente che nella chat dell'assistenza AI sono presenti prompt suggeriti.
- Leggi i risparmi stimati per gli approfondimenti pertinenti in Rendimento > Approfondimenti.
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.
- 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
- Filtrare le richieste di rete protette da IP
- Elementi > La scheda Layout aggiunge il supporto del layout a griglia
- Lighthouse 12.8.2
- Altri punti salienti
- 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 punti 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 punti 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
- Rumore ridotto 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 punti 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 sorgente
- Chiedere a Gemini informazioni sulle informazioni sul rendimento
- 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 punti salienti
- Accessibilità
- Miglioramenti al pannello del rendimento
- Nuovi approfondimenti sul rendimento
- Fai clic per evidenziare
- Tempi del server nel 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 *-shape in Elementi > Stili
- Sperimentale: evidenziazione dei problemi relativi a elementi e attributi nel DOM
- Lighthouse 12.5.0
- Altri punti salienti
- Miglioramenti al pannello del rendimento
- Link all'origine e allo script per le chiamate di profilo e di funzione in Prestazioni
- 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 punti 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 punti salienti
- Cronologia della chat con l'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 in Elementi
- Nuovo riquadro "Novità"
- Lighthouse 12.3.0
- Altri punti salienti
- Eseguire il debug delle richieste di rete, dei file sorgente 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 punti 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 viene spostata in Sensori
- Ignora gli script anonimi e concentrati sul tuo codice nelle analisi dello stack
- Elementi > Stili: supporto delle modalità di scrittura laterali per le griglie di sovrapposizione e le parole chiave CSS
- Controlli Lighthouse per pagine non HTTP nelle modalità Periodo di tempo e Snapshot
- Miglioramenti all'accessibilità
- Altri punti salienti
- Miglioramenti al riquadro Rete
- Filtri di rete rivisitati
- Le esportazioni HAR ora escludono i dati sensibili per impostazione predefinita
- Miglioramenti al riquadro degli elementi
- Valori di completamento automatico per le proprietà text-emphasis-*
- Overflow di scorrimento contrassegnati da un badge
- Miglioramenti al pannello del rendimento
- Consigli nelle metriche in tempo reale
- Navigare tra i breadcrumb
- Miglioramenti al pannello della memoria
- Nuovo profilo "Elementi scollegati"
- Denominazione migliorata degli oggetti JS semplici
- Disattivare i temi dinamici
- Esperimento di Chrome: condivisione dei processi
- Lighthouse 12.2.1
- Altri punti salienti
- Registratore supporta l'esportazione in Puppeteer per Firefox
- Miglioramenti al pannello del rendimento
- Osservazioni sulle metriche in tempo reale
- Richieste di ricerca nella traccia Rete
- Visualizzare le analisi dello stack delle chiamate performance.mark e performance.measure
- Utilizzare i dati dell'indirizzo di test nel pannello di compilazione automatica
- Miglioramenti al riquadro degli elementi
- Forza più stati per elementi specifici
- Elementi > Stili ora completa automaticamente più proprietà della griglia
- Lighthouse 12.2.0
- Altri punti salienti
- Gli approfondimenti della console di Gemini saranno disponibili nella maggior parte dei paesi europei
- Aggiornamenti del pannello del rendimento
- Traccia di rete avanzata
- Personalizzare i dati sul rendimento con l'API di estensibilità
- Dettagli nella traccia Tempi
- Copia tutte le richieste elencate nel riquadro Rete
- Snapshot dell'heap più veloci con tag HTML denominati e meno ingombro
- Apri il riquadro Animazioni per acquisire le animazioni e modificare @keyframes in tempo reale
- Lighthouse 12.1.0
- Miglioramenti all'accessibilità
- Altri punti salienti
- Ispezionare il posizionamento dell'ancora CSS nel riquadro Elementi
- Miglioramenti al riquadro delle fonti
- Funzionalità "Non mettere mai in pausa qui" migliorata
- Nuovi listener di eventi di scorrimento rapido
- Miglioramenti al riquadro Rete
- Valori preimpostati di limitazione della rete aggiornati
- Informazioni sul service worker nei campi personalizzati del formato HAR
- Inviare e ricevere eventi WebSocket nel riquadro Prestazioni
- Altri punti salienti
- Miglioramenti al pannello del rendimento
- Spostare e nascondere le tracce con la modalità di configurazione delle tracce aggiornata
- Ignorare gli script nel grafico a fiamma
- Ridurre la CPU di 20 volte
- Il riquadro Informazioni sulle prestazioni verrà ritirato
- Trovare un utilizzo eccessivo della memoria con i nuovi filtri negli snapshot dell'heap
- Esamina i bucket di archiviazione in Applicazione > Spazio di archiviazione
- Disattivare gli avvisi di self-XSS con un flag della riga di comando
- Lighthouse 12.0.0
- Altri punti salienti
- Comprendere meglio gli errori e gli avvisi nella console con Gemini
- Supporto delle regole@position-try in Elementi > Stili
- Miglioramenti al riquadro delle fonti
- Configurare la stampa in formato leggibile e la chiusura automatica delle parentesi
- Le promesse rifiutate gestite vengono riconosciute come recuperate
- Cause dell'errore nella console
- Miglioramenti al riquadro Rete
- Ispezionare le intestazioni suggerimenti iniziali
- Nascondere la colonna Cascata
- Miglioramenti al pannello del rendimento
- Acquisire le statistiche del selettore CSS
- Modificare l'ordine e nascondere le tracce
- Ignorare i retainer nel riquadro Memoria
- Lighthouse 11.7.1
- Altri punti salienti
- Nuovo pannello di compilazione automatica
- Limitazione avanzata della rete per WebRTC
- Supporto delle animazioni basate sullo scorrimento nel riquadro Animazioni
- Supporto migliorato per l'annidamento CSS in Elementi > Stili
- Pannello Rendimento migliorato
- Nascondere le funzioni e i relativi figli nel grafico a fiamma
- Frecce dagli iniziatori selezionati agli eventi che hanno avviato
- Lighthouse 11.6.0
- Descrizioni comando per categorie speciali in Memoria > Snapshot heap
- Applicazione > Aggiornamenti dello spazio di archiviazione
- Byte utilizzati per lo spazio di archiviazione condiviso
- SQL web è completamente deprecato
- Miglioramenti al riquadro della copertura