Chrome-Entwicklertools für KI-Agenten sind eine Reihe von Tools, die die Leistungsfähigkeit der Chrome-Entwicklertools in Ihre KI-Codierungs-Workflows bringen. Wenn Sie Chrome-Entwicklertools für KI-Agenten installieren, haben Sie Zugriff auf:
- MCP-Server: Verbindet Ihren KI-Agenten über das Open-Source Model Context Protocol mit einer Live-Browserinstanz.
- Chrome-Entwicklertools-CLI: Eine Schnittstelle zur direkten Interaktion mit dem Browser über das Terminal.
- Agentic Skills: Expertenanweisungen, die Ihrem Agenten beibringen, wie er mehrere Tools für komplexe Aufgaben wie die Fehlerbehebung bei der Barrierefreiheit oder Leistung koordiniert.
Im Rahmen der Webentwicklung integrieren die Chrome-Entwicklertools für KI-Agenten Debugging-Funktionen in Ihren KI-Agenten.
Ein Agent kann beispielsweise die Tools verwenden, um Leistungsanalysen aufzuzeichnen und auszuwerten, die Leistung einer Website zu analysieren und potenzielle Verbesserungen zu identifizieren. Neben der Webentwicklung können die Entwicklertools für KI-Agenten Ihrem Agenten auch ermöglichen, im Live-Web zu surfen, anstatt nur statisches HTML abzurufen.
Einrichtung
In dieser Anleitung erfahren Sie, wie Sie die Chrome-Entwicklertools für KI-Agenten einrichten, damit Ihr Codierungs-Agent einen Live-Chrome-Browser steuern und prüfen kann.
Mit dem Paket chrome-devtools-mcp können Sie einen Live-Chrome-Browser über Ihren Codierungs-Agenten (z. B. Gemini, Claude, Cursor oder Copilot) steuern und prüfen. Die Chrome-Entwicklertools für KI-Agenten bieten zwar die vollständige Tool-Suite, die CLI unterstützt jedoch nur eine gezielte Teilmenge für die shellbasierte Automatisierung.
Unterstützte IDEs und Modelle
Die Chrome-Entwicklertools für KI-Agenten unterstützen alle Tools oder IDEs, die das MCP-Protokoll unterstützen. Dazu gehören Antigravity, Gemini CLI, Claude Code, Cursor, Copilot und mehr.
Sicherheitsaspekte
Da Ihr Agent die Seiten, auf die er zugreift, ansehen 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 weiter, die Sie nicht mit Agenten teilen möchten.
Vorbereitung
Bevor Sie die Chrome-Entwicklertools für KI-Agenten installieren, muss Ihre Umgebung die folgenden Anforderungen erfüllen:
Wählen Sie die Methode aus, die Ihrer bevorzugten Programmierumgebung entspricht, um die Chrome-Entwicklertools für KI-Agenten einzurichten. Bei einigen Agenten ist eine manuelle Installation erforderlich, bei anderen sind die Tools bereits integriert.
Antigravity
Die Chrome-Entwicklertools für KI-Agenten sind bereits mit Antigravity 2.0 gebündelt. Sie können sie sofort mit dem Browser-Unteragenten verwenden. Versuchen Sie es mit einem Slash-Befehl wie:
/browser Navigate to the Google homepage
Wenn Sie auf spezielle Agent-Skills zugreifen möchten, empfehlen wir, das Entwicklertools-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 Unteragenten.
Über die CLI installieren
Wenn Ihr Agent dies unterstützt, können Sie die Chrome-Entwicklertools für KI-Agenten einrichten, indem Sie eine JSON-Konfigurationsdatei oder einen CLI-Befehl verwenden, um den Server direkt zu installieren. Einige Agenten bieten auch offizielle Erweiterungen oder Plug-ins, die Agent-Skills enthalten. Das sind Expertenanweisungen, die Ihrem Agenten helfen, die Funktionen der Entwicklertools zu nutzen.
Wenn Ihr Agent hier nicht aufgeführt ist, finden Sie Informationen zur Installation im Chrome Entwicklertools für KI-Agenten GitHub Repository.
Wenn Sie die Chrome-Entwicklertools für KI-Agenten einem Befehlszeilen-Agenten hinzufügen möchten, verwenden Sie die integrierten CLI-Befehle für Ihren spezifischen 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 die Chrome-Entwicklertools für KI-Agenten 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 Chrome-Entwicklertools-Seite für das Claude-Plug-in.
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Über die JSON-Konfiguration installieren
Fügen Sie für andere Agenten, die den Konfigurationsschlüssel mcpServers unterstützen, diesen Eintrag manuell hinzu
und stellen Sie sicher, dass Sie die Entwicklertools für Agenten über npm i
chrome-devtools-mcp installieren.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
In anderen Agenten installieren
Informationen zur Konfiguration für einen nicht aufgeführten Agenten finden Sie im GitHub-Repository für Chrome-Entwicklertools-MCP.
Einrichtung testen
Geben Sie die folgende Eingabeaufforderung in Ihren Agenten ein, um zu prüfen, ob alles funktioniert:
Check the performance of https://developers.chrome.com
Ihr Agent sollte ein Browserfenster öffnen und eine Leistungsanalyse 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.
Oder Sie können genauer sein:
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.