Novità di DevTools (Chrome 147)

Matthias Rohmer

Data di pubblicazione: 7 aprile 2026

Chrome 147 introduce la selezione automatica del contesto per l'assistenza AI, esegue l'upgrade dei suggerimenti di codice al completamento del codice completo, modernizza la barra degli strumenti della modalità dispositivo, introduce la decodifica automatica dei corpi di rete compressi e diversi altri miglioramenti.

Selezione automatica del contesto nell'assistenza AI

Una delle funzionalità più richieste per l'assistenza AI era la possibilità di porre domande più aperte. Un nuovo agente di selezione del contesto ti consente ora di porre domande senza aver selezionato un contesto precedente, ad esempio:

• "Quali sono le richieste di rete più lente in questa pagina?" In precedenza, non era possibile perché dovevi selezionare una richiesta di rete specifica.
• "Quali problemi di rendimento esistono nella pagina?" DevTools ora registrerà automaticamente una traccia con le impostazioni selezionate per rispondere a questa domanda.
• "Come faccio a utilizzare il riquadro Animazioni?" o "Dove si trova l'impostazione di contrasto elevato in DevTools?", fornendo assistenza diretta con DevTools stesso.

Nell'ambito di questa modifica, l'assistenza AI ora può anche cambiare automaticamente il contesto. Aggiornerà in modo intelligente il contesto in base alle tue azioni quando la chat è vuota, rispettando le selezioni manuali una volta avviata una conversazione.

DevTools per gli agenti

Il server e la CLI MCP di Chrome DevTools sono stati aggiornati alla versione 0.21.0, apportando miglioramenti significativi ai flussi di lavoro multi-agente, nuove funzionalità di controllo tramite Lighthouse e un set di competenze migliorato.

Le funzionalità chiave aggiunte dall'ultimo aggiornamento includono:

• Controlli Lighthouse integrati:ora puoi eseguire i controlli Lighthouse direttamente tramite MCP, consentendo controlli automatici di rendimento e qualità all'interno dei flussi di lavoro degli agenti.
• Competenza di rilevamento delle perdite di memoria: è stata aggiunta una nuova competenza per il rilevamento delle perdite di memoria utilizzando lo strumento take_memory_snapshot.
• Miglioramenti delle competenze di accessibilità:la competenza di debug dell'accessibilità è stata perfezionata per sfruttare meglio Lighthouse e fornire un output più solido.
• Competenze di utilizzo generale:le competenze dedicate su come utilizzare il server MCP di Chrome DevTools o la CLI e su come risolvere i problemi di installazione aiutano l'agente a sfruttare al meglio DevTools per gli agenti.
• Supporto del flusso di lavoro multi-agente:l'introduzione del routing pageId consente a più agenti di indirizzare e interagire con precisione con pagine del browser specifiche in parallelo.

Per iniziare a utilizzare queste funzionalità, consulta il repository GitHub con le note sulla release dettagliate.

Generazione del codice

In Chrome 142 abbiamo introdotto i suggerimenti di codice di Gemini nei riquadri Console e Origini. Con Chrome 147, questa funzionalità viene aggiornata alla generazione di codice completa.

Per generare codice, digita un commento in linguaggio naturale che descriva la logica di cui hai bisogno (ad esempio, // Loop to check all img elements for valid alt attributes) e premi Cmd+I (Mac) o Ctrl+I (Windows/Linux) per avviare la generazione.

Barra degli strumenti della modalità dispositivo aggiornata

La barra degli strumenti della modalità dispositivo è stata modernizzata per offrire un'esperienza più coerente e semplificata:

• Controlli standardizzati: la selezione del dispositivo, i livelli di zoom e il rapporto pixel del dispositivo (DPR) ora utilizzano i componenti dell'interfaccia utente standard di DevTools, migliorando l'usabilità.
• Zoom semplificato: il menu Zoom è ora più pulito, con l'opzione "Adatta alla finestra" integrata direttamente nell'elenco delle percentuali. "Regola automaticamente lo zoom" è stato spostato nel proprio pulsante della barra degli strumenti dedicato.
• Supporto del blocco dell'orientamento: DevTools ora gestisce l'API screen.orientation.lock() nell'emulazione del dispositivo. Quando una pagina blocca l'orientamento, il dispositivo emulato ruota automaticamente in modo da corrispondere all'orientamento bloccato e il pulsante di rotazione manuale è disattivato mentre il blocco è attivo.

Problemi di Chromium: 40807290

Corpi compressi decodificati

La diagnosi dei problemi con le risorse compresse è ora molto più semplice. In precedenza, se una richiesta HTTP utilizzava Content-Encoding: gzip o deflate, la visualizzazione Payload nel riquadro Rete mostrava dati binari confusi anziché i contenuti decodificati.

In Chrome 147, DevTools decodifica automaticamente questi corpi compressi, visualizzando i contenuti leggibili direttamente in Payload.

Inoltre, l'elenco delle richieste ora include le informazioni relative alle dimensioni del trasferimento , fornendo un'immagine più chiara dell'utilizzo dei dati via cavo, un dettaglio utilizzato anche dall'assistente AI per selezionare meglio le richieste.

Problemi di Chromium: 356158096

Filtri basati su espressioni regolari per gli stili

Ora puoi utilizzare le espressioni regolari nelle barre dei filtri per i riquadri Stili, Calcolato e Proprietà. Fai clic sul nuovo pulsante di attivazione/disattivazione delle espressioni regolari (.*) per attivarlo. Ad esempio, digita padding|border per evidenziare tutte le proprietà padding e border.

Problema di Chromium: 40706727

Miglioramenti dei caricamenti speculativi

Il debug del precaricamento è più solido grazie alle nuove funzionalità del riquadro Applicazione > Caricamenti speculativi:

• Filtro del testo: ora puoi filtrare l'elenco di regole e tentativi utilizzando testo libero o filtri con chiave (ad es. url:, action:, status:), con supporto della logica AND tra più termini.
• Pulsante Cancella: un nuovo pulsante Cancella ti consente di reimpostare il modello di precaricamento e cancellare le regole e i tentativi visualizzati.
• Codici di stato HTTP: per i prefetch non riusciti, DevTools ora mostra il codice di stato HTTP effettivo (ad es. 404) sia nella colonna dello stato sia nel riquadro dei dettagli, anziché un messaggio di errore generico.

Problemi di Chromium: 479524246, 40926909

Varie

Di seguito sono riportate alcune correzioni e funzionalità degne di nota in questa release:

• Console: quando tutti i frame dello stack in linea di un errore sono inclusi nell'elenco di ignorati, ma lo stack di chiamate contiene frame non ignorati, viene visualizzato un pulsante di attivazione/disattivazione per aiutare a concentrarsi sul codice utilizzabile nascondendo le tracce di libreria rumorose (379788109).
• Rendimento: lo stato della barra laterale (aperta/chiusa) ora viene mantenuto; se chiudi la barra laterale, rimane chiusa nelle registrazioni successive (437340219).
• Impostazioni: DevTools ora può chiederti di riavviare il browser tramite una barra informativa quando attivi o disattivi determinate impostazioni sperimentali.
• Ispezione degli oggetti: una nuova opzione del menu contestuale "Mostra tutto" nelle visualizzazioni degli oggetti ti consente di attivare o disattivare la visibilità delle proprietà nullish (null o undefined) (41187256).
• Elementi: l'ornamento "annuncio" non è più limitato agli iframe e ora può essere mostrato per elementi arbitrari taggati come correlati agli annunci dal backend (485493202).
• Nodi di istruzione: i nodi di istruzione di elaborazione (ad es. <?xml-stylesheet ... ?>) ora sono visibili e modificabili nell'albero DOM (484891675)

Accessibilità

Questa release introduce diversi perfezionamenti dell'accessibilità:

• Rendimento: il pulsante di assistenza per il titolo nelle schede delle metriche sul rendimento ora è sempre visibile e accessibile tramite tastiera, anziché essere visualizzato solo al passaggio del mouse (487613506).
• Origini: ora è possibile selezionare o deselezionare i punti di interruzione del listener di eventi utilizzando la barra spaziatrice (478890182).
• Impostazioni: i tasti Home e Fine ora funzionano per navigare al primo e all' ultimo elemento dell'elenco delle scorciatoie (481747256).
• Lighthouse: annunci dello screen reader migliorati per i gruppi di categorie caselle di controllo (4776909).