Acquisire eventi di doppio clic e clic con il tasto destro del mouse nel riquadro Registratore
Il pannello Registratore ora può acquisire eventi di doppio clic e clic con il tasto destro del mouse.
In questo esempio, avvia una registrazione e prova a eseguire i seguenti passaggi:
- Fai doppio clic sulla scheda per ingrandirla
- Fai clic con il tasto destro del mouse sulla scheda e seleziona un'azione dal menu contestuale.
Per capire come Registratore ha acquisito questi eventi, espandi i passaggi:
- Doppio clic viene acquisito come
type: doubleClick. - L'evento Fai clic con il tasto destro del mouse viene acquisito come
type: click, ma la proprietàbuttonè impostata susecondary. Il valorebuttondi un normale clic del mouse èprimary.
Problemi di Chromium: 1300839, 1322879, 1299701, 1323688
Nuova modalità Periodo di tempo e Snapshot nel riquadro Lighthouse
Ora puoi utilizzare Lighthouse per misurare il rendimento del tuo sito web oltre il caricamento della pagina.
Il riquadro Lighthouse ora supporta tre modalità di misurazione del flusso utente:
- I report Navigazione analizzano il caricamento di una singola pagina. La navigazione è il tipo di report più comune. Tutti i report Lighthouse precedenti alla versione attuale sono report di navigazione.
- I report Periodi di tempo analizzano un periodo di tempo arbitrario, generalmente durante il quale ci sono state interazioni degli utenti.
- I report Snapshot analizzano la pagina in un determinato stato, generalmente dopo l'interazione dell'utente.
Ad esempio, misuriamo il rendimento dell'aggiunta di articoli al carrello in questa pagina demo. Seleziona la modalità Intervallo di tempo e fai clic su Avvia intervallo di tempo. Scorri e aggiungi alcuni articoli al carrello. Al termine, fai clic su Intervallo di tempo finale per generare un report Lighthouse delle interazioni degli utenti.
Consulta Flussi utente in Lighthouse per scoprire i casi d'uso, i vantaggi e le limitazioni unici di ogni modalità.
Problema di Chromium: 1291284
Aggiornamenti delle informazioni sul rendimento
Controllo dello zoom migliorato nel riquadro Informazioni sulle prestazioni
Ora DevTools esegue lo zoom in base al cursore del mouse anziché alla posizione della testina di riproduzione.Con l'ultimo zoom basato sul cursore, puoi spostare il mouse in qualsiasi punto della traccia ed eseguire lo zoom in sull'area desiderata immediatamente.
Consulta Approfondimenti sul rendimento per scoprire come ottenere approfondimenti strategici e migliorare il rendimento del tuo sito web con il pannello.
Problema di Chromium: 1313382
Confermare l'eliminazione di una registrazione delle prestazioni
Ora DevTools mostra una finestra di dialogo di conferma prima di eliminare una registrazione delle prestazioni.
Problema di Chromium: 1318087
Riordinare i riquadri nel riquadro Elementi
Ora puoi riordinare i riquadri nel pannello Elementi in base alle tue preferenze.
Ad esempio, quando apri DevTools su uno schermo stretto, il riquadro Accessibilità è nascosto sotto il pulsante Mostra altro. Se esegui spesso il debug dei problemi di accessibilità, ora puoi trascinare il riquadro in primo piano per accedervi più facilmente.
Problema di Chromium: 1146146
Scegliere un colore al di fuori del browser
DevTools ora supporta la scelta di un colore al di fuori del browser. In precedenza, potevi scegliere un colore solo all'interno del browser.
Nel riquadro Stili, fai clic su un'anteprima del colore per aprire un selettore di colori. Usa il contagocce per scegliere un colore ovunque.
Problema di Chromium: 1245191
Miglioramento dell'anteprima dei valori in linea durante il debug
Il debugger ora mostra correttamente l'anteprima dei valori in linea.
In questo esempio, la funzione double ha un parametro di input a e una variabile x. Inserisci un punto di interruzione nella riga return ed esegui il codice. L'anteprima in linea mostra correttamente i valori a e x. In precedenza, il debugger non mostrava il valore x nell'anteprima in linea.
Problema di Chromium: 1316340
Supporta blob di grandi dimensioni per gli autenticatori virtuali
La scheda WebAuthn ora include la nuova casella di controllo Supporta blob di grandi dimensioni per gli autenticatori virtuali.
Questa casella di controllo è disattivata per impostazione predefinita. Puoi attivarlo solo per gli autenticatori con protocollo ctap2 che supportano le chiavi residenti.
Problema di Chromium: 1321803
Nuove scorciatoie da tastiera nel riquadro Origini
Nel riquadro Fonti sono ora disponibili due nuove scorciatoie da tastiera:
- Attiva/disattiva la barra laterale di navigazione (a sinistra) con Control/Command + Maiusc + Y
- Attiva/disattiva la barra laterale del debugger (a destra) con Control/Command + Maiusc + H
Problemi di Chromium: 1226363
Miglioramenti delle mappe di origine
In precedenza, gli sviluppatori riscontravano errori casuali durante:
- Debug con l'esempio di Codepen
- Identificazione della posizione di origine dei problemi di rendimento in un esempio di Codepen
- Scheda Componente mancante quando React DevTools è abilitato
Ecco alcune correzioni alle mappe delle origini per migliorare l'esperienza di debug complessiva:
- Mappatura corretta tra posizione e offset per script incorporati e posizione di origine
- Utilizzare le informazioni di fallback per la posizione del testo del frame
- Risolvi correttamente gli URL relativi con l'URL del frame
Problemi di Chromium: 1319828, 1318635, 1305475
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
- 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 momenti salienti
- Miglioramenti al riquadro Rete
- Filtri di rete rivisitati
- Le esportazioni HAR ora escludono i dati sensibili per impostazione predefinita