Chrome DevTools per gli agenti è una suite di strumenti che porta la potenza di Chrome DevTools nei flussi di lavoro di programmazione AI. Installando Chrome DevTools per gli agenti, ottieni l'accesso a:
- Server MCP: collega l'agente AI a un'istanza del browser live utilizzando il protocollo Model Context Protocol open source.
- Chrome DevTools CLI: un'interfaccia per interagire con il browser direttamente dal terminale.
- Competenze agentiche: istruzioni esperte che insegnano all'agente come coordinare più strumenti per attività complesse come il debug di accessibilità o prestazioni.
Nel contesto dello sviluppo web, Chrome DevTools per gli agenti integra le funzionalità di debug nell'agente AI.
Ad esempio, un agente può utilizzare gli strumenti per registrare e valutare le tracce delle prestazioni per analizzare le prestazioni di un sito web e identificare potenziali miglioramenti. Oltre allo sviluppo web, DevTools per gli agenti consente anche all'agente di navigare sul web live anziché recuperare solo HTML statico.
Configurazione
Questa guida mostra come configurare Chrome DevTools per gli agenti per aiutare l'agente di programmazione a controllare e ispezionare un browser Chrome live.
Utilizza il pacchetto chrome-devtools-mcp per controllare e ispezionare un browser Chrome live dall'agente di programmazione (ad esempio Gemini, Claude, Cursor o Copilot). Tieni presente che, sebbene Chrome DevTools per gli agenti fornisca la suite completa di strumenti, la CLI supporta solo un sottoinsieme mirato per l'automazione basata su shell.
IDE e modelli supportati
Chrome DevTools per gli agenti supporta qualsiasi strumento o IDE che supporti il protocollo MCP. Sono inclusi Antigravity, Gemini CLI, Claude Code, Cursor, Copilot e altri.
Considerazioni sulla sicurezza
Poiché l'agente sarà in grado di visualizzare e interagire con le pagine a cui accede, può agire efficacemente per tuo conto se lo colleghi a un browser con una sessione attiva e autenticata. Evita di condividere informazioni sensibili o personali che non vuoi condividere con gli agenti.
Prerequisiti
Prima di installare Chrome DevTools per gli agenti, assicurati che il tuo ambiente soddisfi i seguenti requisiti:
Per configurare Chrome DevTools per gli agenti, scegli il metodo che corrisponde al tuo ambiente di programmazione preferito. Sebbene alcuni agenti richiedano l'installazione manuale, altri vengono forniti con gli strumenti preintegrati.
Antigravity
Chrome DevTools per gli agenti viene fornito in bundle 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 agentiche specializzate, ti consigliamo di installare il plug-in DevTools durante il passaggio Crea con Google della configurazione iniziale o nelle impostazioni dell'applicazione. Per ulteriori informazioni, consulta la documentazione relativa al sottoagente del browser Antigravity.
Installare utilizzando la CLI
Per configurare Chrome DevTools per gli agenti, puoi utilizzare un file di configurazione JSON o un comando CLI per installare il server direttamente se l'agente lo supporta. Alcuni agenti offrono anche estensioni o plug-in ufficiali che includono competenze agentiche, istruzioni esperte che aiutano l'agente a utilizzare le funzionalità di DevTools.
Per aggiungere Chrome DevTools per gli agenti a un agente della riga di comando, utilizza i comandi CLI integrati per l'agente specifico:
Gemini CLI
Installa l'estensione Gemini CLI che include il pacchetto MCP e le competenze associate utilizzando il seguente comando:
# Gemini extension (MCP+Skills)
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Installa solo il pacchetto MCP con il seguente comando:
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
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 ulteriori informazioni, consulta la pagina ufficiale del plug-in Chrome DevTools Claude page.
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Installare utilizzando la configurazione JSON
Per gli altri agenti che supportano la chiave di configurazione mcpServers, aggiungi manualmente
questa voce e assicurati di installare DevTools per gli agenti tramite npm i
chrome-devtools-mcp.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
Installare in altri agenti
Per la configurazione di un agente non elencato, consulta il repository GitHub di Chrome DevTools MCP.
Verificare la configurazione
Inserisci il seguente prompt nell'agente per verificare che tutto funzioni:
Check the performance of https://developers.chrome.com
L'agente dovrebbe aprire una finestra del browser e registrare una traccia delle prestazioni.
Risolvere i problemi di configurazione
Se l'agente non riesce a eseguire gli strumenti e ha accesso alle competenze di Chrome DevTools, potrebbe tentare di risolvere il problema automaticamente. In caso contrario, puoi richiedere esplicitamente all'agente:
Use the Chrome DevTools troubleshooting skill to fix my setup.
Oppure puoi essere più specifico:
I'm having trouble with Chrome DevTools for agents. I tried to run [Tool Name]
but got the error: [Error Message]. I am on [OS Name]. Use the Chrome DevTools
troubleshooting skill to fix my setup.
Configurazione avanzata
Ecco alcuni altri modi in cui l'agente può accedere al browser.
Configurare la modalità headless
Se vuoi eseguire attività in background senza una finestra del browser visibile, puoi eseguire Chrome in modalità headless (senza UI). Aggiungi il flag --headless agli argomenti del server:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless"
]
}
}
}
Connettersi a una sessione del browser esistente
Per impostazione predefinita, DevTools per gli agenti avvia una nuova istanza di Chrome. Tuttavia, puoi connettere l'agente a una sessione del browser esistente utilizzando il flag --autoConnect. Questa opzione è particolarmente utile se l'agente deve esaminare un problema che è bloccato da un accesso o da una sessione che hai già avviato.
Esistono due modi per connettersi a una sessione esistente:
Utilizzare la connessione automatica (Chrome 144+)
Quando il server MCP di Chrome DevTools è configurato con l'opzione --autoConnect, il server MCP si connette a un'istanza di Chrome attiva e richiede una sessione di debug remoto.
- Nel browser Chrome in esecuzione, vai a
chrome://inspect/#remote-debuggingper attivare il debug remoto. Aggiorna la configurazione MCP in modo da includere il flag
--autoConnect:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }Invia un prompt all'agente. Chrome mostrerà una finestra di dialogo che chiede all'utente l'autorizzazione per consentire la sessione di debug remoto. Fai clic su Consenti.
Connettersi manualmente utilizzando la porta di debug remoto
Se non puoi utilizzare --autoConnect (ad esempio, se esegui l'agente in un ambiente sandbox), puoi avviare manualmente Chrome con una porta di debug.
Ecco un esempio (su macOS):
Avvia il browser Chrome con la porta di debug remoto attivata. Per motivi di sicurezza, devi anche specificare una directory dei dati utente personalizzata.
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stableConfigura l'agente per la connessione utilizzando il parametro
--browser-url:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }