Chrome-Entwicklertools für KI-Agenten sind eine Reihe von Tools, mit denen Sie die Leistungsfähigkeit der Chrome-Entwicklertools in Ihre KI-Coding-Workflows einbinden können. Durch die Installation von Chrome-Entwicklertools für KI-Agenten erhalten Sie Zugriff auf:
- MCP-Server: Verbindet Ihren KI-Agenten über das Open-Source-Model Context Protocol mit einer aktiven Browserinstanz.
- Chrome-Entwicklertools-CLI: Eine Schnittstelle, über die Sie direkt über das Terminal mit dem Browser interagieren können.
- Agentic Skills: Expertenanweisungen, die Ihrem Agenten beibringen, wie er mehrere Tools für komplexe Aufgaben wie das Debuggen von Bedienungshilfen oder der Leistung koordiniert.
Im Kontext der Webentwicklung werden mit Chrome-Entwicklertools für KI-Agenten Debugging-Funktionen in Ihren KI-Agenten integriert.
Ein Agent kann die Tools beispielsweise verwenden, um Leistungstraces aufzuzeichnen und auszuwerten, um die Leistung einer Website zu analysieren und potenzielle Verbesserungen zu ermitteln. Neben der Webentwicklung ermöglichen die Entwicklertools für KI-Agents auch, dass Ihr KI-Agent im Live-Web surfen kann, anstatt nur statisches HTML abzurufen.
Einrichtung
In dieser Anleitung erfahren Sie, wie Sie Chrome-Entwicklertools für KI-Agenten einrichten, damit Ihr Coding-Agent einen aktiven Chrome-Browser steuern und untersuchen kann.
Mit dem chrome-devtools-mcp-Paket können Sie einen aktiven Chrome-Browser über Ihren Coding-Agenten (z. B. Gemini, Claude, Cursor oder Copilot) steuern und untersuchen. Die Chrome-Entwicklertools für Agents bieten zwar die vollständige Palette an Tools, die CLI unterstützt jedoch nur eine gezielte Teilmenge für die shellbasierte Automatisierung.
Unterstützte IDEs und Modelle
Chrome-Entwicklertools für KI-Agenten unterstützen alle Tools oder IDEs, die das MCP-Protokoll unterstützen. Dazu gehören Antigravity, die Gemini CLI, Claude Code, Cursor, Copilot und mehr.
Sicherheitsaspekte
Da Ihr Agent die Seiten, auf die er zugreift, aufrufen und mit ihnen interagieren kann, kann er effektiv in Ihrem Namen handeln, wenn Sie ihn mit einem Browser mit einer aktiven, authentifizierten Sitzung verbinden. Geben Sie keine vertraulichen oder personenbezogenen Daten an, die Sie nicht an Kundenservicemitarbeiter weitergeben möchten.
Vorbereitung
Prüfen Sie vor der Installation von Chrome DevTools für Agents, ob Ihre Umgebung die folgenden Anforderungen erfüllt:
Wählen Sie die Methode aus, die zu Ihrer bevorzugten Entwicklungsumgebung passt, um Chrome-Entwicklertools für KI-Agenten einzurichten. Einige Agents müssen manuell installiert werden, andere sind bereits in die Tools integriert.
Antigravity
Chrome-Entwicklertools für Agents sind in Antigravity 2.0 enthalten. Sie können ihn sofort mit dem Browser-Unteragenten verwenden. Versuchen Sie, einen Slash-Befehl wie den folgenden zu verwenden:
/browser Navigate to the Google homepage
Wenn Sie auf spezielle Agent-Skills zugreifen möchten, empfehlen wir, das DevTools-Plug-in während des Schritts Build with Google der Ersteinrichtung oder in den Anwendungseinstellungen zu installieren. Weitere Informationen finden Sie in der Dokumentation zum Antigravity Browser-Subagent.
Installation über die Befehlszeile
Wenn Sie Chrome DevTools für Agents einrichten möchten, können Sie eine JSON-Konfigurationsdatei oder einen CLI-Befehl verwenden, um den Server direkt zu installieren, sofern Ihr Agent dies unterstützt. Einige Agents bieten auch offizielle Erweiterungen oder Plug-ins an, die KI-Agenten-Skills enthalten, also Expertenanweisungen, die Ihrem Agenten helfen, Entwicklertools-Funktionen zu nutzen.
Wenn Ihr Agent hier nicht aufgeführt ist, finden Sie Informationen zur Installation im GitHub-Repository „Chrome DevTools for Agents“.
Wenn Sie einem Befehlszeilen-KI-Agenten Chrome-Entwicklertools für KI-Agenten hinzufügen möchten, verwenden Sie die integrierten CLI-Befehle für Ihren jeweiligen KI-Agenten:
Gemini CLI
Installieren Sie die Gemini CLI-Erweiterung, die das MCP-Paket und die zugehörigen Skills enthält, mit dem folgenden Befehl:
# Gemini extension (MCP+Skills)
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Installieren Sie nur das MCP-Paket mit dem folgenden Befehl:
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
Claude Code
Verwenden Sie die folgenden Slash-Befehle in Claude Code, um Chrome DevTools für Agents als Claude Code-Plug-in zu installieren. Fügen Sie die Marketplace-Registrierung hinzu:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
Installieren Sie das Plug-in über die Marketplace-Registrierung:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
Weitere Informationen finden Sie auf der offiziellen Seite zum Claude-Plugin für Chrome-Entwicklertools.
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Installation mit JSON-Konfiguration
Bei anderen Agents, die den Konfigurationsschlüssel mcpServers unterstützen, fügen Sie diesen Eintrag manuell hinzu und installieren Sie DevTools für Agents über npm i
chrome-devtools-mcp.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
In anderen Agents installieren
Informationen zur Konfiguration für einen nicht aufgeführten Agent finden Sie im GitHub-Repository für Chrome-Entwicklertools-MCP.
Einrichtung testen
Geben Sie den folgenden Prompt in Ihren Agent ein, um zu prüfen, ob alles funktioniert:
Check the performance of https://developers.chrome.com
Ihr Agent sollte ein Browserfenster öffnen und einen Leistungstrace aufzeichnen.
Probleme mit der Einrichtung beheben
Wenn Ihr Agent keine Tools ausführen kann und Zugriff auf Chrome-Entwicklertools-Skills hat, versucht er möglicherweise, das Problem automatisch zu beheben. Ist das nicht der Fall, können Sie den Agenten explizit auffordern:
Use the Chrome DevTools troubleshooting skill to fix my setup.
Sie können auch spezifischer formulieren:
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.
Nächste Schritte
Informationen zum Anpassen der Einrichtung finden Sie unter Konfiguration.