Chrome DevTools for agents is een suite van tools die de kracht van Chrome DevTools naar uw AI-codeerworkflows brengt. Door Chrome DevTools for agents te installeren, krijgt u toegang tot:
- MCP-server : verbindt uw AI-agent met een live browserinstantie met behulp van het open-source Model Context Protocol .
- Chrome DevTools CLI : een interface om rechtstreeks vanuit je terminal met de browser te communiceren.
- Agentische vaardigheden : deskundige instructies die uw agent leren hoe meerdere tools te coördineren voor complexe taken zoals toegankelijkheids- of prestatie-debugging.
In de context van webontwikkeling integreert Chrome DevTools voor agents debugmogelijkheden in uw AI-agent.
Een agent kan de tools bijvoorbeeld gebruiken om prestatiegegevens vast te leggen en te evalueren, om zo de prestaties van een website te analyseren en mogelijke verbeteringen te identificeren. Naast webontwikkeling stelt DevTools voor agenten uw agent ook in staat om live op het web te browsen in plaats van alleen statische HTML op te halen.
Instellen
Deze handleiding laat u zien hoe u Chrome DevTools voor agents instelt, zodat uw codeeragent een live Chrome-browser kan beheren en inspecteren.
Gebruik het pakket chrome-devtools-mcp om een live Chrome-browser te besturen en te inspecteren vanuit uw codeagent (zoals Gemini, Claude, Cursor of Copilot). Houd er rekening mee dat Chrome DevTools voor agents weliswaar de volledige reeks tools biedt, maar dat de CLI slechts een beperkte subset ondersteunt voor shell-gebaseerde automatisering.
Ondersteunde IDE's en modellen
Chrome DevTools voor agents ondersteunt elke tool of IDE die het MCP-protocol ondersteunt. Dit omvat Antigravity, Gemini CLI, Claude Code, Cursor, Copilot en meer.
Veiligheidsaspecten
Omdat uw agent de pagina's die hij bezoekt kan bekijken en ermee kan interageren, kan hij in feite namens u handelen als u hem koppelt aan een browser met een actieve, geauthenticeerde sessie. Vermijd het delen van gevoelige of persoonlijke informatie die u niet met agenten wilt delen.
Voorwaarden
Voordat u Chrome DevTools voor agents installeert, moet u ervoor zorgen dat uw omgeving aan de volgende vereisten voldoet:
Om Chrome DevTools voor agents in te stellen, kies je de methode die het beste bij je programmeeromgeving past. Sommige agents vereisen handmatige installatie, terwijl andere de tools al voorgeïntegreerd hebben.
Antizwaartekracht
Chrome DevTools voor agents wordt standaard meegeleverd met Antigravity 2.0 . Je kunt er direct mee aan de slag via de browser-subagent . Probeer bijvoorbeeld een slash-commando zoals:
/browser Navigate to the Google homepage
Om toegang te krijgen tot gespecialiseerde agentvaardigheden, raden we aan de DevTools-plug-in te installeren tijdens de stap 'Bouwen met Google' van de eerste installatie of in de toepassingsinstellingen. Raadpleeg de documentatie van de Antigravity Browser Subagent voor meer informatie.
Installeren via de command line
Om Chrome DevTools voor agents in te stellen, kunt u een JSON-configuratiebestand of een CLI-opdracht gebruiken om de server rechtstreeks te installeren, mits uw agent dit ondersteunt. Sommige agents bieden ook officiële extensies of plug-ins aan met agentvaardigheden en deskundige instructies die uw agent helpen bij het gebruik van de DevTools-functies.
Als uw agent hier niet wordt vermeld, kunt u in de GitHub-repository van Chrome DevTools for Agents vinden hoe u deze kunt installeren.
Om Chrome DevTools voor agents toe te voegen aan een command-line agent, gebruikt u de ingebouwde CLI-opdrachten voor uw specifieke agent:
Gemini CLI
Installeer de Gemini CLI-extensie, inclusief het MCP-pakket en de bijbehorende skills, met behulp van de volgende opdracht:
# Gemini extension (MCP+Skills)
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Installeer alleen het MCP-pakket met de volgende opdracht:
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
Claude Code
Om Chrome DevTools voor agents als een Claude Code-plugin te installeren, gebruikt u de volgende slash-opdrachten in Claude Code. Voeg de marketplace-registratie toe:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
Installeer vervolgens de plugin vanuit het marketplace-register:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
Zie de officiële Chrome DevTools Claude Plugin-pagina voor meer informatie.
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Installeren met behulp van JSON-configuratie
Voor andere agents die de configuratiesleutel mcpServers ondersteunen, voegt u deze vermelding handmatig toe en zorgt u ervoor dat u DevTools voor agents installeert via npm i chrome-devtools-mcp .
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
Installeren in andere agenten
Om een agent te configureren die niet in de lijst staat, raadpleegt u de GitHub-repository van Chrome DevTools MCP .
Test je installatie
Voer de volgende opdracht in uw agent in om te controleren of alles werkt:
Check the performance of https://developers.chrome.com
Uw agent moet een browservenster openen en een prestatietrace vastleggen.
Los problemen met uw installatie op.
Als uw agent geen tools kan uitvoeren en toegang heeft tot Chrome DevTools-vaardigheden, kan deze proberen het probleem automatisch op te lossen. Als dit niet gebeurt, kunt u de agent expliciet vragen om het probleem te verhelpen.
Use the Chrome DevTools troubleshooting skill to fix my setup.
Of je kunt specifieker zijn:
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.
Geavanceerde configuratie
Dit zijn enkele andere manieren waarop uw agent toegang kan krijgen tot de browser.
Configureer de modus zonder beeldscherm
Als je achtergrondtaken wilt uitvoeren zonder dat er een browservenster zichtbaar is, kun je Chrome in de headless-modus (zonder gebruikersinterface) uitvoeren. Voeg de vlag --headless toe aan je serverargumenten:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless"
]
}
}
}
Verbinden met een bestaande browsersessie
Standaard start DevTools voor agents een nieuwe Chrome-instantie. Je kunt je agent echter verbinden met een bestaande browsersessie met behulp van de vlag --autoConnect . Dit is met name handig als je agent een probleem moet onderzoeken dat alleen toegankelijk is na aanmelding of binnen een sessie die je al hebt gestart.
Er zijn twee manieren om verbinding te maken met een bestaande sessie:
Gebruik automatische verbinding (Chrome 144+)
Wanneer de Chrome DevTools MCP-server is geconfigureerd met de optie --autoConnect , maakt de MCP-server verbinding met een actieve Chrome-instantie en vraagt een externe debugsessie aan.
- Ga in je actieve Chrome-browser naar
chrome://inspect/#remote-debuggingom debuggen op afstand in te schakelen. Werk uw MCP-configuratie bij om de vlag
--autoConnecttoe te voegen:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }Geef een prompt aan uw agent. Chrome toont een dialoogvenster waarin om toestemming wordt gevraagd voor de externe debugsessie. Klik op Toestaan .
Maak handmatig verbinding via de externe debugpoort.
Als je --autoConnect niet kunt gebruiken (bijvoorbeeld als je je agent in een sandbox-omgeving uitvoert), kun je Chrome handmatig starten met een debugpoort. Hier is een voorbeeld (op macOS):
Start de Chrome-browser met de poort voor externe foutopsporing ingeschakeld. Om veiligheidsredenen moet u ook een aangepaste gebruikersgegevensmap opgeven.
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stableConfigureer uw agent om verbinding te maken met behulp van de parameter
--browser-url:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }