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.
Volgende stappen
Om uw instellingen aan te passen, raadpleegt u de configuratie .