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 l'agente AI a un'istanza del browser live utilizzando il Model Context Protocol open source.
- Chrome DevTools CLI: un'interfaccia per interagire direttamente con il browser dal terminale.
- Competenze agentiche: istruzioni esperte che insegnano all'agente come coordinare più strumenti per attività complesse come l'accessibilità o il debug delle 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 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 agenti in modo che l'agente di codifica possa controllare e ispezionare un browser Chrome attivo.
Utilizza il pacchetto chrome-devtools-mcp per controllare e ispezionare un browser Chrome live dal tuo agente di programmazione (come Gemini, Claude, Cursor o Copilot). Tieni presente che, mentre Chrome DevTools per agenti fornisce la suite completa di strumenti, l'interfaccia a riga di comando 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 altro ancora.
Considerazioni sulla sicurezza
Poiché l'agente potrà visualizzare e interagire con le pagine a cui accede, può agire efficacemente per tuo conto se lo connetti 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. Mentre alcuni agenti richiedono l'installazione manuale, altri vengono forniti con gli strumenti preintegrati.
Antigravity
Chrome DevTools per agenti viene fornito in bundle con Antigravity 2.0. Puoi iniziare a utilizzarlo subito con l'agente secondario del browser. Prova a utilizzare un comando slash come:
/browser Navigate to the Google homepage
Per accedere alle skill dell'agente specializzate, 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 relativa all'agente secondario del browser Antigravity.
Installazione tramite CLI
Per configurare Chrome DevTools per agenti, puoi utilizzare un file di configurazione JSON o un comando CLI per installare direttamente il server, se l'agente lo supporta. Alcuni agenti offrono anche estensioni o plug-in ufficiali che includono skill dell'agente, istruzioni per esperti che aiutano l'agente a utilizzare le funzionalità di DevTools.
Se il tuo agente non è elencato qui, puoi scoprire come installarlo nel repository GitHub di Chrome DevTools for Agents.
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 del marketplace:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
e installa il plug-in dal registro di Marketplace:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
Per maggiori informazioni, consulta la pagina ufficiale del plug-in Claude per Chrome DevTools.
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 del rendimento.
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 chiedere esplicitamente all'agente:
Use the Chrome DevTools troubleshooting skill to fix my setup.
In alternativa, puoi fornire informazioni più specifiche:
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.