Chrome DevTools per agenti è una suite di strumenti che porta la potenza di Chrome DevTools nei tuoi workflow di programmazione AI. Installando Chrome DevTools per agenti, ottieni l'accesso a:
- Server MCP: collega il tuo agente AI a un'istanza del browser live utilizzando il protocollo Model Context Protocol open source.
- CLI di Chrome DevTools: un'interfaccia per interagire con il browser direttamente dal terminale.
- Competenze agentiche: istruzioni esperte che insegnano al tuo agente come coordinare più strumenti per attività complesse come il debug di accessibilità o prestazioni.
Nel contesto dello sviluppo web, Chrome DevTools per agenti integra le funzionalità di debug nel tuo 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 agenti consente anche al tuo agente di navigare sul web live anziché recuperare solo HTML statico.
Configurazione
Questa guida mostra come configurare Chrome DevTools per agenti per aiutare il tuo 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 dal tuo agente di programmazione (ad esempio Gemini, Claude, Cursor o Copilot). Tieni presente che, sebbene Chrome DevTools per 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 agenti supporta qualsiasi strumento o IDE che supporti il protocollo MCP. Sono inclusi Antigravity, Gemini CLI, Claude Code, Cursor, Copilot e altri ancora.
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 personali o sensibili che non vuoi condividere con gli agenti.
Prerequisiti
Prima di installare Chrome DevTools per agenti, assicurati che il tuo ambiente soddisfi i seguenti requisiti:
Per configurare Chrome DevTools per 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 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 degli agenti, ti consigliamo di installare il plug-in DevTools durante il passaggio Build with Google della configurazione iniziale o nelle impostazioni dell'applicazione. Per ulteriori informazioni, consulta la documentazione del sottoagente del browser Antigravity.
Installare utilizzando la CLI
Per configurare Chrome DevTools per 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 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 agenti come plug-in di 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 altri agenti che supportano la chiave di configurazione mcpServers, aggiungi manualmente
questa voce e assicurati di installare DevTools per 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.
Passaggi successivi
Per personalizzare la configurazione, vedi Configurazione.