Chrome-Entwicklertools für Agents sind eine Reihe von Tools, mit denen Sie die Leistungsfähigkeit der Chrome-Entwicklertools in Ihre KI-basierten Programmier-Workflows einbinden können. Wenn Sie Chrome-Entwicklertools für Agents installieren, erhalten Sie Zugriff auf:
- MCP-Server: Verbindet Ihren KI-Agenten über das Open-Source-Protokoll Model Context Protocol mit einer Live-Browserinstanz.
- Chrome-Entwicklertools-CLI: Eine Schnittstelle zur direkten Interaktion mit dem Browser über das Terminal.
- Agent-Fähigkeiten: Expertenanweisungen, die Ihrem Agent beibringen, wie er mehrere Tools für komplexe Aufgaben wie das Debugging von Barrierefreiheit oder Leistung koordinieren kann.
Im Rahmen der Webentwicklung werden mit Chrome-Entwicklertools für Agents Debugging-Funktionen in Ihren KI-Agenten integriert.
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 kann Ihr Agent mit den Entwicklertools für Agents auch im Live-Web surfen, anstatt nur statisches HTML abzurufen.
Einrichtung
In dieser Anleitung erfahren Sie, wie Sie Chrome-Entwicklertools für Agents einrichten, damit Ihr Programmier-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 Programmier-Agenten (z. B. Gemini, Claude, Cursor oder Copilot) steuern und prüfen. Beachten Sie, dass die Chrome-Entwicklertools für Agents zwar die vollständige Tool-Suite bieten, die CLI jedoch nur eine gezielte Teilmenge für die shellbasierte Automatisierung unterstützt.
Unterstützte IDEs und Modelle
Chrome-Entwicklertools für Agents 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 Agents teilen möchten.
Vorbereitung
Prüfen Sie vor der Installation von Chrome-Entwicklertools für Agents, ob Ihre Umgebung die folgenden Anforderungen erfüllt:
Wählen Sie zum Einrichten von Chrome-Entwicklertools für Agents die Methode aus, die Ihrer bevorzugten Programmierumgebung entspricht. Bei einigen Agents ist eine manuelle Installation erforderlich, bei anderen sind die Tools bereits integriert.
Antigravity
Chrome-Entwicklertools für Agents sind bereits mit Antigravity 2.0 gebündelt. Sie können sie sofort mit dem Browser-Sub-Agent verwenden. Versuchen Sie, einen Slash-Befehl wie den folgenden zu verwenden:
/browser Navigate to the Google homepage
Wenn Sie auf spezielle Agent-Fähigkeiten 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 Sub-Agent.
Über die CLI installieren
Wenn Ihr Agent dies unterstützt, können Sie Chrome-Entwicklertools für Agents einrichten, indem Sie eine JSON-Konfigurationsdatei oder einen CLI-Befehl verwenden, um den Server direkt zu installieren. Einige Agents bieten auch offizielle Erweiterungen oder Plug-ins, die Agent-Fähigkeiten enthalten. Das sind Expertenanweisungen, die Ihrem Agent helfen, die Funktionen der Entwicklertools zu nutzen.
Wenn Ihr Agent hier nicht aufgeführt ist, finden Sie Informationen zur Installation im Chrome DevTools for Agents GitHub Repository.
So fügen Sie Chrome-Entwicklertools für Agents einem Befehlszeilen-Agenten hinzu: Verwenden Sie die integrierten CLI-Befehle für Ihren spezifischen Agent:
Gemini CLI
Installieren Sie die Gemini CLI-Erweiterung, die das MCP-Paket und die zugehörigen Fähigkeiten 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-Entwicklertools 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 aus der 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 Agents, die den Konfigurationsschlüssel mcpServers unterstützen, diesen Eintrag manuell hinzu
und stellen Sie sicher, dass Sie die Entwicklertools für Agents über npm i
chrome-devtools-mcp installieren.
{
"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 die folgende Eingabeaufforderung 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 eine Leistungsanalyse aufzeichnen.
Probleme mit der Einrichtung beheben
Wenn Ihr Agent keine Tools ausführen kann und Zugriff auf Chrome-Entwicklertools-Fähigkeiten hat, versucht er möglicherweise, das Problem automatisch zu beheben. Wenn das nicht der Fall ist, können Sie den Agent 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.
Erweiterte Konfiguration
Es gibt noch andere Möglichkeiten, wie Ihr Agent auf den Browser zugreifen kann.
Monitorlosen Modus konfigurieren
Wenn Sie Hintergrundaufgaben ohne sichtbares Browserfenster ausführen möchten, können Sie Chrome im monitorlosen Modus (ohne Benutzeroberfläche) ausführen. Fügen Sie den Serverargumenten das Flag --headless hinzu:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless"
]
}
}
}
Mit einer vorhandenen Browsersitzung verbinden
Standardmäßig starten die Entwicklertools für Agents eine neue Chrome-Instanz. Sie können Ihren Agent jedoch mit dem Flag --autoConnect mit einer vorhandenen Browsersitzung verbinden. Das ist besonders nützlich, wenn Ihr Agent ein Problem untersuchen muss, das hinter einer Anmeldung oder einer bereits gestarteten Sitzung liegt.
Es gibt zwei Möglichkeiten, eine Verbindung zu einer vorhandenen Sitzung herzustellen:
Automatische Verbindung verwenden (Chrome 144+)
Wenn der Chrome-Entwicklertools-MCP-Server mit der Option --autoConnect konfiguriert ist, stellt der MCP-Server eine Verbindung zu einer aktiven Chrome-Instanz her und fordert eine Remote-Debugging-Sitzung an.
- Rufen Sie in Ihrem ausgeführten Chrome-Browser
chrome://inspect/#remote-debuggingauf, um das Remote-Debugging zu aktivieren. Aktualisieren Sie Ihre MCP-Konfiguration, um das Flag
--autoConnecteinzufügen:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }Geben Sie eine Eingabeaufforderung für Ihren Agent aus. In Chrome wird ein Dialogfeld angezeigt, in dem der Nutzer um die Berechtigung für die Remote-Debugging-Sitzung gebeten wird. Klicken Sie auf Zulassen.
Manuell über den Remote-Debugging-Port verbinden
Wenn Sie --autoConnect nicht verwenden können (z. B. wenn Sie Ihren Agent in einer Sandbox-Umgebung ausführen), können Sie Chrome manuell mit einem Debugging-Port starten.
Beispiel (unter macOS):
Starten Sie den Chrome-Browser mit aktiviertem Remote-Debugging-Port. Aus Sicherheitsgründen müssen Sie auch ein benutzerdefiniertes Nutzerdatenverzeichnis angeben.
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stableKonfigurieren Sie Ihren Agent so, dass er die Verbindung über den Parameter
--browser-urlherstellt:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }