Data di pubblicazione: 19 maggio 2026
Gli strumenti di codifica AI sono incredibilmente potenti per scrivere codice, ma spesso sono scollegati dalla sua esecuzione. Possono generare un'app web complessa, ma non possono osservarne il comportamento o ispezionarne l'output in un browser live.
Chrome DevTools per gli agenti fornisce al tuo agente di codifica la visibilità di cui ha bisogno per verificare, eseguire il debug e ottimizzare il codice in tempo reale. A Un paio di mesi fa l'abbiamo mostrato per la prima volta, e ora siamo felici di annunciare che Chrome DevTools per gli agenti è ora disponibile come release stabile 1.0.
Collega l'agente al browser
Chrome DevTools per gli agenti consente al tuo agente di sperimentare il tuo sito come farebbe un utente reale. Questa release stabile include diversi modi per te e il tuo agente di interfacciarvi con Chrome:
- Server Model Context Protocol (MCP): un server che collega i modelli linguistici di grandi dimensioni (LLM) alle funzionalità di debug di DevTools.
- Interfaccia a riga di comando (CLI): un'alternativa efficiente in termini di token che consente agli agenti di raggruppare le azioni in script.
- Competenze dell'agente: istruzioni esperte che insegnano al tuo agente come e quando utilizzare strumenti specifici per attività come il debug di accessibilità o prestazioni.
Esegui automaticamente il debug, l'emulazione e l'audit
Con la release 1.0, il tuo agente di codifica può ora eseguire attività di debug avanzate che in precedenza erano manuali.
Automatizza gli audit di qualità
Il tuo agente può ora eseguire audit Lighthouse per valutare la qualità del sito web . Può identificare problemi di accessibilità, SEO, best practice e navigazione agentica. È come avere un linter che comprende il runtime. Utilizzato come gate di qualità, trasforma il tuo agente di codifica in un esperto che rileva i blocchi critici prima che raggiungano la produzione.
Emula le esperienze utente reali
Il tuo agente può utilizzare DevTools per gli agenti per testare l'aspetto e le prestazioni di un sito su vari dispositivi o in località diverse utilizzando gli strumenti di emulazione. Può ridimensionare le finestre, simulare le geolocalizzazioni e limitare la velocità di rete e CPU per imitare le condizioni del mondo reale. In questo modo, il tuo agente può testare comportamenti specifici per i dispositivi mobili, come i menu hamburger, senza che tu debba ridimensionare manualmente il browser.
Sviluppa ed esegui il debug delle estensioni di Chrome
Puoi anche consentire al tuo agente non solo di aiutarti a sviluppare le estensioni di Chrome, ma anche di eseguirne il debug. Il tuo agente può installare, ricaricare e attivare direttamente le azioni delle estensioni. In questo modo, il ciclo frequente di "salvataggio e aggiornamento" durante lo sviluppo viene automatizzato. Può anche approfondire gli script in background e le pagine delle estensioni per aiutarti a correggere i bug in configurazioni del browser più complesse.
Esegui il debug e testa gli strumenti WebMCP
Stiamo anche fornendo una visibilità approfondita della prova dell'origine WebMCP (Web Model Context Protocol) per aiutarti a implementare questa nuova API.
Anziché fare affidamento sui segnali per dedurre un piano di navigazione nel DOM, l'agente può interagire direttamente con gli strumenti strutturati che esponi utilizzando WebMCP. In questo modo è più facile sviluppare, testare ed eseguire il debug di questi strumenti: l'agente può elencare, richiamare a livello di programmazione e convalidare la loro correttezza in tempo reale. In questo modo, il processo di aggiunta del supporto WebMCP al tuo sito e di test è semplificato.
Rileva ed esegui il debug delle perdite di memoria
Abbiamo anche aggiunto strumenti dedicati per l'analisi della memoria. Il tuo agente può ora acquisire snapshot dell'heap per identificare le perdite di memoria, ad esempio i nodi DOM scollegati. Utilizzando competenze specializzate per il debug delle perdite di memoria, l'agente funge da esperto di prestazioni per aiutarti a mantenere la tua applicazione snella e veloce.
Trasferisci le sessioni con la connessione automatica
Puoi condividere il contesto del browser corrente con un agente, anziché fare in modo che l'agente apra la propria istanza del browser in sandbox (in genere, DevTools per gli agenti consente agli agenti di accedere al browser). Questa soluzione è ideale per il debug di elementi che richiedono un accesso, come una dashboard autenticata, in cui vuoi che l'agente AI si occupi dell'indagine tecnica senza dover autenticare di nuovo tutto.
Espone lo stato interno con strumenti di sviluppo di terze parti
Gli strumenti di sviluppo di terze parti consentono alla tua applicazione web di condividere lo stato interno e i dettagli dei componenti direttamente con gli agenti AI. Fornendo l'accesso ai dati che in genere sono nascosti dall'analisi standard, questi strumenti forniscono agli agenti il contesto di cui hanno bisogno per comprendere la logica complessa. In questo modo, i suggerimenti di debug sono più accurati in base al comportamento effettivo dell'applicazione nel browser.
Inizia
Puoi installare la release stabile utilizzando npm o configurarla direttamente nell'agente che preferisci:
Antigravity
Chrome DevTools per gli agenti è preinstallato con Antigravity 2.0. Puoi iniziare a utilizzarlo immediatamente con il sottoagente del browser. Prova a utilizzare un comando slash, ad esempio:
/browser Navigate to the Google homepage
Per accedere alle competenze specializzate dell'agente, ti consigliamo di installare il plug-in DevTools durante il passaggio Crea con Google della configurazione iniziale o nelle impostazioni dell'applicazione. Per saperne di più, consulta la documentazione del sottoagente del browser Antigravity.
Gemini CLI
Per installare il pacchetto MCP e le competenze come estensione, utilizza il seguente comando:
$ gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Claude Code
Per installare Chrome DevTools per gli agenti come plug-in Claude Code, utilizza i seguenti comandi slash in Claude Code. Aggiungi il registro di Marketplace:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
Installa il plug-in dal registro di Marketplace:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
Per guide più dettagliate e prompt di esempio, consulta la documentazione di Chrome DevTools per gli agenti. Puoi anche esplorare il codice sorgente su GitHub.