Chrome DevTools voor agents
Geef je codeerder de kracht van DevTools via de DevTools MCP-server of de bijbehorende gespecialiseerde CLI en vaardigheden.
MCP-server
CLI
Nu installeren
Zowel de MCP-server als de CLI maken deel uit van hetzelfde pakket. Download ze voor de codeeragent van uw keuze. Instructies voor de meest populaire agents vindt u hieronder, en instructies voor meer dan 20 agents op GitHub.
Gemini CLI
# Either MCP only: gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest # Or as a Gemini extension (MCP+Skills): gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Claude Code
# Either MCP only: claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest # Or as a plugin (MCP+Skills): /plugin marketplace add ChromeDevTools/chrome-devtools-mcp /plugin install chrome-devtools-mcp
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Eerste stappen
Nadat je de DevTools MCP-server of CLI hebt geïnstalleerd, kun je een paar prompts proberen om aan de slag te gaan! Vraag bijvoorbeeld om een Lighthouse-audit, vul een formulier in of vraag om een schermafbeelding - allemaal vanaf je agent. Om al deze mogelijkheden in actie te zien, probeer je bijvoorbeeld de volgende prompt:
Visit developer.chrome.com and run a search for "devtools", while recording a performance trace. Let me know how I can improve the website's performance.
Deze prompt gebruikt tools om een nieuwe pagina te maken, interactie met de zoekbalk te hebben en een prestatietrace uit te voeren, inclusief CruX-gegevens!