Novità di DevTools - Novembre 2026

Matthias Rohmer

Data di pubblicazione: 20 ottobre 2026

Chrome 155 e Chrome 156 sono stati rilasciati nel canale stabile a ottobre, introducendo una nuova serie di funzionalità di debug e creazione nel browser a novembre: ispezione degli stili CSS in DevTools per gli agenti, un editor position-area interattivo per il posizionamento degli ancoraggi CSS in Elementi e diagnostica della provenienza degli annunci e del manifest di installazione web in Applicazione. Puoi anche rilevare variabili di contesto inattive in Memoria, ispezionare gli avvisi di precaricamento di Early Hints e le sostituzioni persistenti in Rete e navigare nelle sequenze temporali in modo più fluido in Prestazioni.

Selezionando le regioni della griglia di ancoraggio nell'editor visivo position-area nella scheda Stili del riquadro Elementi accanto all'overlay di posizionamento dell'ancoraggio.
Selezione delle regioni della griglia di ancoraggio nell'editor visivo dell'area di posizione nella scheda Stili del riquadro Elementi accanto all'overlay di posizionamento dell'ancoraggio.

DevTools per gli agenti

Il server MCP di Chrome DevTools aggiunge l'ispezione dello stile CSS, il supporto dei file di configurazione e l'analisi delle tracce suddivise in blocchi per gli agenti di programmazione:

  • Ispezione degli stili CSS: esamina gli stili calcolati e corrispondenti con lo strumento get_css_styles, che supporta l'impaginazione (pageSize e pageIdx) e formatta le regole corrispondenti, le regole ereditate, gli pseudo-elementi, le regole @keyframes e @ (@position-try, @property e @function).
  • Controlli dei file di configurazione e dei percorsi: gestisci i flag del server con un file di configurazione dedicato, configura le root del file system personalizzate e utilizza --allow-unrestricted-paths per impostazione predefinita nell'interfaccia a riga di comando.
  • Analisi del buffer di traccia suddiviso in blocchi: analizza registrazioni di prestazioni di grandi dimensioni con un analizzatore del buffer di traccia suddiviso in blocchi e un buffer di traccia predefinito da 1,2 GB. Inoltre, DevTools limita le istanze del motore di traccia per ogni analisi per evitare perdite di memoria.
  • Gestione delle finestre di dialogo e persistenza della console: gestisci automaticamente le finestre di dialogo JavaScript attivate durante le azioni degli Strumenti di immissione e conserva la cronologia dei messaggi della console durante le navigazioni nello stesso documento.
  • Aggiornamento del menu: fai clic su Scarica Chrome DevTools per agenti nel menu principale di DevTools per aprire le istruzioni di configurazione.

Scopri di più nel repository chrome-devtools-mcp.

Elementi: editor visivo di position-area, selezione implicita dell'ancoraggio e aggiornamenti della creazione di CSS

Il riquadro Elementi introduce strumenti visivi per il posizionamento degli ancoraggi CSS ed espande l'ispezione CSS:

  • Editor visivo di position-area: fai clic sul campione in linea accanto a una dichiarazione position-area nella scheda Stili per selezionare visivamente le regioni della griglia di ancoraggio, configurare gli assi contemporaneamente o singolarmente, attivare/disattivare la parola chiave self e abbreviare le parole chiave senza asse.
  • Selezione implicita dell'ancoraggio sugli adorner dei popup: fai clic con il tasto destro del mouse su un adorner di popup nell'albero DOM quando un elemento ha più ancoraggi impliciti per ispezionare e passare a qualsiasi elemento di ancoraggio associato.
  • Overlay della casella di posizionamento degli ancoraggi: esamina i margini, il padding, il bordo e le caselle dei contenuti del blocco contenitore modificato con inset (IMCB) direttamente nell'overlay della viewport durante il debug degli elementi posizionati con ancoraggio.
  • wrap-reverse nell'editor Flexbox: attiva/disattiva flex-wrap: wrap-reverse direttamente dall'editor Flexbox visivo nella scheda Stili.
  • Stili CSS inattivi per @starting-style e regole ereditate: esamina le regole @starting-style inattive e le sezioni Inherited from con stati di espansione e compressione manuali conservati tra gli aggiornamenti.
  • Proprietà personalizzate con più trattini e completamento automatico delle classi: ispeziona e modifica le proprietà personalizzate CSS che iniziano con tre o più trattini (ad esempio ---theme-color) e filtra le classi già applicate dai suggerimenti di completamento automatico di Aggiungi nuova classe.
Selezione di un elemento di ancoraggio implicito dal menu contestuale dell'adorner del popover nell'albero DOM del riquadro Elementi.
Selezione di un elemento di ancoraggio implicito dal menu contestuale dell'adorner del popover nell'albero DOM del riquadro Elementi.

Problemi di Chromium: 553335561, 438724570, 413061413, 397184392, 539424116, 533783988

Applicazione: diagnostica del file manifest di installazione web, provenienza degli annunci e aggiornamenti della tabella di archiviazione

I riquadri Applicazione e Problemi aggiungono la diagnostica per i manifest di installazione web, la provenienza degli script degli annunci e l'ispezione dello spazio di archiviazione:

  • Diagnostica del manifest di installazione web: esamina gli errori del manifest di installazione web (navigator.install e <install>) nel riquadro Problemi, tra cui errori di recupero, errori di sintassi, valori start_url non validi, nomi o ID mancanti e manifest mancanti, con link diretti al file manifest interessato.
  • Documentazione relativa alla colonna e alla metrica Provenienza dell'annuncio: controlla la nuova colonna Provenienza dell'annuncio nella sezione Annunci del riquadro Applicazione per vedere se uno script dell'annuncio corrisponde a una catena di script predecessori o a una regola dell'elenco di filtri, insieme ai tooltip della documentazione e ai link Scopri di più sulle metriche degli annunci.
  • Ergonomia delle tabelle IndexedDB e Cookies: espandi gli oggetti nidificati nella griglia di dati IndexedDB con altezze di riga dinamiche che mantengono la posizione di scorrimento ed elimina le righe selezionate nella tabella Cookies utilizzando la tastiera o il menu contestuale.
Ispezione della colonna Provenienza dell'annuncio e del tooltip della provenienza nella sezione Annunci del riquadro Applicazione, insieme a un errore del manifest di installazione web nel riquadro Problemi.
Ispezione della colonna Provenienza dell'annuncio e del tooltip di origine nella sezione Annunci del riquadro Applicazione, insieme a un errore del manifest di installazione web nel riquadro Problemi.

Problemi di Chromium: 333795265, 553428200, 514957134, 555304817, 555304814, 562142155

Rete: avvisi di precaricamento di Early Hints e override persistenti

Il riquadro Rete perfeziona la diagnostica di Early Hints, le sostituzioni locali e i flussi di lavoro delle intestazioni personalizzate:

  • Avviso di precaricamento di Early Hints quando la cache è disattivata: visualizza un avviso nella sezione delle intestazioni di Early Hints quando le risposte 103 Early Hints includono link di precaricamento mentre l'opzione Disattiva cache è attiva, spiegando perché Chrome ignora questi precaricamenti.
  • Sostituzioni locali permanenti e colonne di intestazioni personalizzate: fornisci sostituzioni locali del corpo della risposta durante la navigazione nelle pagine, mantieni le configurazioni delle colonne di intestazioni della richiesta e della risposta personalizzate e l'ordinamento durante i ricaricamenti e copia i payload delle richieste non elaborati troncati dal menu contestuale.
Ispezione di un avviso di precaricamento di Early Hints nella scheda Intestazioni del riquadro Rete con l'opzione Disattiva cache abilitata e un override della risposta locale attivo.
Ispezione di un avviso di precaricamento di Early Hints nella scheda Intestazioni del riquadro Rete con l'opzione Disattiva cache abilitata e un override della risposta locale attivo.

Problemi di Chromium: 548701038, 559925510, 563542902, 556269542, 377410082

Memoria: rilevamento di campi di contesto inattivi nelle istantanee heap

Il riquadro Memoria ora rileva le variabili di chiusura inutilizzate che rimangono conservate nei contesti di esecuzione di V8. DevTools analizza i metadati dell'ambito V8 incorporati nelle istantanee heap per correlare le chiusure con gli oggetti Context condivisi. Poi evidenzia i campi di contesto inattivi mantenuti attivi da closure di pari livello di lunga durata quando nessuna closure attiva vi accede, ordinati in base all'impatto sulla memoria.

Filtro di un'istantanea heap in base agli oggetti conservati dai contesti nel riquadro Memoria per ispezionare una variabile di contesto inattiva conservata da un contesto di esecuzione V8 condiviso.
Filtro di un'istantanea heap in base agli oggetti conservati dai contesti nel riquadro Memoria per ispezionare una variabile di contesto inattiva conservata da un contesto di esecuzione V8 condiviso.

Problemi di Chromium: 497855658

Prestazioni: navigazione più fluida nella cronologia e stato dell'albero delle chiamate conservato

Il riquadro Prestazioni offre una navigazione più reattiva nel flame chart e conserva il contesto di analisi tra i riquadri:

  • Navigazione più fluida nella sequenza temporale: lo zoom, la panoramica e il trascinamento della minimappa della sequenza temporale non presentano più ritardi.
  • Stato dell'albero delle chiamate e dal basso verso l'alto conservato: passa da un riquadro di DevTools all'altro senza perdere i nodi espansi, la selezione o la posizione di scorrimento nelle schede Albero delle chiamate e Dal basso verso l'alto.
Ispezione di un intervallo della minimappa della cronologia ingrandito e dei nodi di attività JavaScript espansi nella scheda Albero delle chiamate del riquadro Prestazioni.
Ispezione di un intervallo della minimappa della cronologia ingrandito e dei nodi di attività JavaScript espansi nella scheda Albero delle chiamate del riquadro Prestazioni.

Problemi di Chromium: 553831653, 561396590

Altri punti forti

Chrome 155 e Chrome 156 includono anche i seguenti miglioramenti nei riquadri di DevTools:

  • Sensori: esegui l'override di navigator.cpuPerformance direttamente dal nuovo controllo Livello di prestazioni della CPU nel riquadro Sensori o lascia che rifletta i preset di limitazione della CPU attivi. (Problemi di Chromium: 449760252, 526856234, 526857820)
  • Modalità dispositivo: mantieni le preferenze di zoom con regolazione automatica e scala per dispositivo emulato e rendi persistente l'override di Save-Data quando attivi/disattivi la barra degli strumenti del dispositivo. (Problemi di Chromium: 561306841, 555160483)
  • Selettore colori: visualizza i suggerimenti di colori di contrasto APCA per il testo chiaro su sfondi scuri e converti i colori fuori gamma in oklab() e oklch() senza valori NaN. (Problemi di Chromium: 560325669, 558821258)
  • Accessibilità: identifica i pulsanti di attivazione/disattivazione dei filtri delle espressioni regolari attivi con un indicatore non colorato, ascolta i nomi delle proprietà dei caratteri annunciati dagli screen reader in Panoramica CSS e naviga con anelli di selezione della tastiera migliorati e visibilità ad alto contrasto nei pannelli. (Problemi di Chromium: 556764882, 555848535, 555599825, 553804654)
Eseguire l'override del livello di prestazioni della CPU nel riquadro Sensori e ispezionare i suggerimenti sul rapporto di contrasto e i valori oklch nel selettore colori.
Eseguire l'override del livello di prestazioni della CPU nel riquadro Sensori e ispezionare i suggerimenti per il rapporto di contrasto e i valori oklch nel selettore colori.

Problemi di Chromium: 449760252, 526856234, 526857820, 561306841, 555160483, 560325669, 558821258, 556764882, 555848535, 555599825, 553804654