Novità di DevTools (Chrome 152)

Matthias Rohmer

Data di pubblicazione: 25 agosto 2026

Chrome 152 introduce miglioramenti significativi al debug di rete con il reinvio delle richieste e l'ispezione del payload binario, decorazioni di elementi personalizzati e nidificazione CSS avanzata in Elements, Core Web Vitals per le navigazioni soft in Performance Live Metrics, esportazione di tabelle strutturate nella console e miglioramenti per il server MCP di DevTools.

DevTools per gli agenti

La versione v1.7.0 più recente del server MCP di Chrome DevTools si basa sulle funzionalità di debug della memoria introdotte in precedenza per gli agenti di codifica come Antigravity, Claude, Codex e altri:

• Dettagli dell'istantanea heap (get_heapsnapshot_object_details): Esamina le proprietà dettagliate degli oggetti JavaScript, i nomi delle classi e i percorsi di conservazione della radice GC direttamente dalle istantanee heap.
• Filtro del contesto V8 nativo:filtra gli oggetti dell'istantanea heap in base al contesto di esecuzione nativo e ispeziona i contesti nativi nei riepiloghi delle istantanee.
• Miglioramenti della stabilità e del ciclo di vita dei daemon: è stata aggiunta la conservazione delle richieste di rete per navigazione limitata, la convalida dell'ID sessione, gli avvisi di mancata corrispondenza della versione CLI-daemon e l'arresto controllato del worker in caso di eliminazione del contesto.

Per saperne di più e iniziare, visita il repository DevTools for agents su GitHub.

Rete: modifica e invio di nuovo delle richieste, precaricamento degli approfondimenti e decodifica del payload binario

• Invia di nuovo le richieste di recupero e XHR:la voce di menu contestuale "Ripeti XHR" ora è Invia di nuovo. Ora supporta tutte le richieste di rete recuperabili, convertendo le richieste standard in chiamate fetch() e preservando la fedeltà della riproduzione completa insieme a XHR. Le richieste monitorano e visualizzano anche il contesto di esecuzione e l'origine della console.
• Colonna Precaricato e "Copia come elemento di precaricamento": una nuova colonna dedicata Precaricato mostra se è stata avviata una richiesta di rete utilizzando il precaricamento speculativo. Puoi anche fare clic con il tasto destro del mouse su qualsiasi richiesta e selezionare Copia come elemento di precaricamento per generare un tag <link rel="preload"> pronto per essere inserito nel codice HTML. Gli Early Hints ora sono classificati nella colonna Iniziatore.
• Visualizzatore binario per i payload delle richieste:la scheda Payload ora include opzioni per il metodo di decodifica (Base64, Esadecimale e UTF-8) per i payload delle richieste binari e compressi, in modo da rispecchiare la scheda Risposta.
• Colonna Numero richiesta bloccata:la colonna Richiesta # è ora bloccata nella prima posizione della griglia dei dati di rete per facilitare il riferimento alle richieste.
• Filtro host stesso sito:la ricerca di domini, nomi host o porte (ad es. localhost o example.com) nella barra del filtro Rete ora filtra con precisione le richieste stesso sito.
• Decodifica predefinita dei parametri di query:i parametri di query e modulo nella scheda Payload vengono ora decodificati automaticamente per tutte le richieste.

Problemi di Chromium: 40726969, 41299075, 40138847, 40222701, 525848667, 507077182, 498482622, 520437951, 40267477

Elementi: decorazioni personalizzate degli elementi, interazioni con il selettore CSS padre nidificato e selezione dello pseudo-elemento $0

L'ispezione e la creazione di componenti web e CSS moderni sono più veloci e intuitive nel riquadro Elementi:

• Badge decoratore dell'elemento personalizzato:gli elementi HTML personalizzati (identificati da tag con trattino o attributi is="..." per elementi integrati personalizzati) ora mostrano un badge decoratore custom-element nella struttura ad albero del DOM.
• Interazioni e specificità del selettore principale CSS nidificato:il passaggio del mouse sopra i selettori principali nelle regole CSS nidificate e nelle regole nidificate ereditate ora evidenzia gli elementi corrispondenti nella pagina e risponde al filtro della scheda Stili. Sono stati aggiunti popup di descrizione comando di specificità per le regole @nested-declarations.
• Selezione di pseudo-elementi tramite $0:la selezione di pseudo-elementi come ::before o ::after nell'albero DOM degli elementi ora li associa direttamente alla variabile della console $0 per l'ispezione immediata di JavaScript.
• Completamento automatico per i tipi text-wrap e <image>:il riquadro Stili ora suggerisce tutti i valori delle parole chiave per text-wrap (wrap, nowrap, balance, pretty, stable) e completa automaticamente le proprietà CSS che accettano i tipi di dati <image>.
• Rilevamento della barra di scorrimento del modello Box Model:ora il diagramma delle metriche del modello Box Model calcola e visualizza con precisione le dimensioni della casella dei contenuti quando gli elementi hanno barre di scorrimento visibili.

Problemi di Chromium: 367440148, 535517817, 535522242, 535523039, 537724428, 399305533, 334984154, 383355294, 326260752, 389342065

Rendimento: metriche di navigazione soft in Metriche live e preset di screenshot personalizzati

• Supporto delle metriche live per le navigazioni soft:la visualizzazione delle metriche live ora acquisisce e riporta le metriche di Core Web Vitals (come LCP e INP) per le navigazioni soft lato client nelle applicazioni a pagina singola per impostazione predefinita, grazie a un upgrade a web-vitals v6.0.0.
• Preset di acquisizione personalizzati per gli screenshot: preset configurabili per le dimensioni e il limite del numero di frame degli screenshot per il tracciamento CDP nel riquadro Prestazioni per personalizzare la fedeltà della registrazione visiva nei limiti di memoria.
• Visualizzatore delle tracce console.profileEnd():la chiamata a console.profileEnd() nel codice o nella console ora apre e mostra automaticamente la traccia registrata nel riquadro Rendimento.
• Riepilogo delle tracce personalizzate dell'API Extensibility:i riepiloghi delle tracce di rendimento ora elaborano e presentano i gruppi di tracce personalizzate registrati utilizzando l'API Extensibility.

Problemi di Chromium: 514721939, 490140054, 536954453, 535506117

Console: esporta le tabelle come Markdown o CSV e protezione dagli effetti collaterali

• Copia le tabelle della console come Markdown o CSV:le tabelle registrate utilizzando console.table() ora possono essere copiate direttamente negli appunti come tabelle Markdown formattate o dati CSV dal menu contestuale.
• Protezione della valutazione degli effetti collaterali:la valutazione al passaggio del mouse del debugger ora protegge dalle espressioni contenenti new, letterali di modelli taggati, import() dinamici e operatori delete, impedendo mutazioni accidentali dello stato durante la pausa.

Problemi di Chromium: 40924951, 40133606

Altri punti forti

Una raccolta di miglioramenti significativi in altri sottosistemi di DevTools:

• Origini: Apri rapido ora assegna la priorità ai file dello spazio di lavoro locale con un punteggio elevato, in modo che i file dello spazio di lavoro vengano visualizzati in primo piano rispetto alle risorse di rete. (Problema di Chromium: 40260136)
• Memoria: la visualizzazione Riepilogo snapshot heap ora mostra i conteggi totali degli oggetti insieme alle dimensioni superficiali aggregate per i tipi selezionati e include filtri di contesto di esecuzione nativi. (Problema di Chromium: 497855658)
• Applicazione: il riquadro Annunci ha spostato il pulsante di attivazione/disattivazione Evidenzia annunci direttamente nel riquadro, ha aggiunto ID elemento iframe annuncio selezionabili per visualizzare i frame nella gerarchia e ha introdotto una tabella di suddivisione delle metriche per frame. (Problema di Chromium: 514957134)
• Applicazione: è stata riprogettata la sezione Cancella dati dei siti nel riquadro Spazio di archiviazione in un gruppo unificato e consolidato (problema di Chromium: 375867286) e sono state risolte le voci duplicate di Cache Storage dopo i ripristini della cache back-forward (problema di Chromium: 484693244).
• Estensioni: i metodi asincroni in chrome.devtools.panels ora restituiscono in modo nativo le promesse JavaScript quando vengono chiamati senza un callback. (Problema di Chromium: 496604551)
• Impostazioni: suddivide le preimpostazioni di limitazione della larghezza di banda della rete predefinite e le configurazioni di limitazione personalizzate in sezioni separate. (Problema di Chromium: 342409451)
• Lighthouse: è stato aggiornato il modulo Lighthouse incluso alla versione 13.4.1. (Problema di Chromium: 40543651)
• Problemi: DevTools genera un avviso quando un'immagine che utilizza loading="lazy" non ha dimensioni width o height esplicite.
• Modalità dispositivo: è stato semplificato il menu del livello di zoom con un'opzione unificata Adatta a finestra ed è stata disattivata l'opzione di attivazione/disattivazione Mostra cornice dispositivo quando la grafica della cornice non è disponibile.

Miglioramenti all'accessibilità

Chrome 152 include i seguenti miglioramenti dell'accessibilità:

• Elementi e accessibilità: sono state aggiunte opzioni del menu contestuale per passare senza problemi dall'albero DOM degli elementi alla visualizzazione ad albero dell'accessibilità, oltre a "Scorri fino alla visualizzazione" per i nodi di accessibilità. (Problemi di Chromium: 417929842)
• Accessibilità: è stato aggiunto il supporto per la copia di nodi e sottoalberi della struttura di accessibilità come testo normale utilizzando il menu contestuale. (Problema di Chromium: 417929842)
• Elementi: corretti i colori di evidenziazione della ricerca a basso contrasto nel pannello Elementi quando viene eseguito in modalità Buio. (Problema di Chromium: 491718898)
• Navigazione: lo sganciamento di DevTools in una finestra separata o il riaggancio nella scheda non forzano più lo stato attivo di selezione sul pulsante del menu principale.
• Impostazioni: è stato aggiunto un contesto accessibile descrittivo ai pulsanti "Mostra altro" e "Mostra meno" nelle impostazioni dell'AI.