Query sui contenitori CSS modificabili nel riquadro Stili
Ora puoi visualizzare e modificare le query sui contenitori CSS nel riquadro Stili.
Le query sui contenitori forniscono un approccio molto più dinamico al design responsivo. La regola @@container funziona in modo simile a una media query con @media. Tuttavia, anziché eseguire query sul riquadro e sullo user agent per ottenere informazioni, @container esegue query sul contenitore principale che corrisponde a determinati criteri.
Nel riquadro Elementi, fai clic su un elemento DOM con la regola at @container. DevTools ora mostra le informazioni @container nel riquadro Stili. Fai clic per modificare le dimensioni. Nel riquadro Stili vengono visualizzate anche le informazioni sul container corrispondenti. Passa il mouse sopra per evidenziare l'elemento contenitore nella pagina e controllare le dimensioni del contenitore. Fai clic per selezionare l'elemento contenitore.
La funzionalità delle query sui contenitori è attualmente sperimentale. Per testarlo, attiva il flag #enable-container-queries in chrome://flags.
Problema di Chromium: 1146422
Anteprima del web bundle nel riquadro Rete
Web Bundle è un formato di file per incapsulare una o più risorse HTTP in un unico file. Ora puoi visualizzare l'anteprima dei contenuti del web bundle nel riquadro Rete.
Al momento la funzionalità dei web bundle è sperimentale. Per testarlo, attiva il flag #enable-experimental-web-platform-features in chrome://flags.
Problema di Chromium: 1182537
Debug dell'API Attribution Reporting
Gli errori dell'API Attribution Reporting vengono ora segnalati nella scheda Problemi.
Attribution Reporting è una nuova API che ti aiuta a misurare quando un'azione dell'utente (ad esempio un clic o una visualizzazione dell'annuncio) porta a una conversione, senza utilizzare identificatori cross-site.
Problema di Chromium: 1190735
Migliore gestione delle stringhe nella console
Il nuovo menu contestuale nella console ti consente di copiare qualsiasi stringa come contenuto, valore letterale JavaScript o valore letterale JSON.
In Chrome 90, DevTools ha aggiornato la console per formattare sempre gli output delle stringhe come valori letterali JSON validi. Abbiamo ricevuto feedback dagli sviluppatori secondo cui questa modifica potrebbe generare confusione. Alcuni ritengono che la quantità di caratteri di escape sia eccessiva e renda l'output illeggibile.
La console ora formatta gli output delle stringhe come valori letterali JavaScript validi e offre tre opzioni di copia delle stringhe. L'opzione Copia come valore letterale JavaScript esegue l'escape dei caratteri speciali appropriati e racchiude la stringa tra virgolette singole, virgolette doppie o apici inversi, a seconda del contenuto della stringa. L'opzione Copia contenuti stringa copia invece i contenuti della stringa non elaborati (inclusi i nuovi paragrafi e altri caratteri speciali) negli appunti. Infine, Copia stringa come valore letterale JSON formatta la stringa come valore letterale JSON valido e la copia negli appunti.
Problema di Chromium: 1208389
Debug CORS migliorato
Gli errori TypeError correlati a CORS nella console ora sono collegati al riquadro Rete e alla scheda Problemi.
Fai clic sulle due nuove icone accanto al messaggio di errore relativo a CORS per visualizzare la richiesta di rete o comprendere meglio il messaggio di errore e ottenere potenziali soluzioni nella scheda Problemi.
Problema di Chromium: 1213393
Lighthouse 8.1
Il riquadro Lighthouse ora esegue Lighthouse 8.1.
Se il tuo sito espone le mappe di origine a Lighthouse, cerca il pulsante Visualizza mappa ad albero per visualizzare una suddivisione del JavaScript spedito, filtrabile per dimensioni e copertura al caricamento.
Il report include anche un nuovo filtro delle metriche (fai riferimento al filtro Mostra audit pertinenti a nello screenshot). Scegli una metrica su cui concentrarti per visualizzare le opportunità e la diagnostica più pertinenti per migliorare solo quella metrica.
La categoria Rendimento ha subito una serie di modifiche al sistema di punteggio per allinearsi ad altri strumenti per il rendimento e riflettere meglio lo stato del web.
Consulta le note di rilascio per un elenco completo delle modifiche.
Problema di Chromium: 772558
Visualizzare l'URL della nuova nota nel riquadro Manifest
Il riquadro Manifest ora mostra l'URL della nuova nota.
Al momento su ChromeOS (CrOS), le app Chrome e le app per Android che dichiarano una funzionalità "new-note" possono essere selezionate come app per prendere appunti nelle impostazioni dello stilo (visualizzate se il dispositivo CrOS è stato utilizzato con uno stilo). Se selezionata come app per prendere appunti, l'app può essere avviata dal pulsante "Crea nota" della tavolozza della stilo. L'aggiunta del campo new-note-url nel manifest dell'applicazione fa parte dell'impegno per aggiungere funzionalità equivalenti alle app web.
Problema di Chromium: 1185678
Selettori di corrispondenza CSS corretti
Gli strumenti di sviluppo hanno corretto i selettori di corrispondenza CSS, che non funzionavano nell'ultima release.
I selettori separati da virgole nel riquadro Stili sono colorati in modo diverso a seconda che corrispondano al nodo DOM selezionato:
- La parte non corrispondente viene visualizzata in grigio chiaro.
- Una parte del selettore di corrispondenza viene visualizzata in nero.
Problema di Chromium: 1219153
Formattazione delle risposte JSON nel riquadro Rete
Ora puoi stampare in modo leggibile le risposte JSON nel riquadro Rete.
Apri una risposta JSON nel riquadro Rete, fai clic sull'icona {} per formattarla in modo leggibile.
Bug di Chromium: 998674
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
- 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 momenti 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