Chrome DevTools MCP

Chrome DevTools für Agents

Chrome DevTools für Agents (chrome-devtools-mcp) ermöglicht es deinem Coding-Agenten (z. B. Antigravity, Claude, Cursor oder Copilot), einen laufenden Chrome-Browser zu steuern und zu inspizieren. Es fungiert als Model-Context-Protocol (MCP)-Server und gibt deinem KI-Coding-Assistenten Zugriff auf die volle Leistungsfähigkeit von Chrome DevTools für zuverlässige Automatisierung, tiefgehendes Debugging und Leistungsanalyse. Eine CLI ist ebenfalls für die Nutzung ohne MCP verfügbar.

Tool-Referenz | Changelog | Mitwirken | Fehlerbehebung | Design-Prinzipien

Hauptfunktionen

• Leistungseinblicke erhalten: Nutzt Chrome DevTools, um Traces aufzuzeichnen und umsetzbare Leistungseinblicke zu extrahieren.
• Erweitertes Browser-Debugging: Analysiere Netzwerkanfragen, mache Screenshots und überprüfe Browser-Konsolenmeldungen (mit Source-Mapped-Stack-Traces).
• Zuverlässige Automatisierung: Nutzt puppeteer, um Aktionen in Chrome zu automatisieren und wartet automatisch auf Aktionsergebnisse.

Haftungsausschlüsse

chrome-devtools-mcp legt den Inhalt der Browser-Instanz gegenüber den MCP-Clients offen, sodass diese alle Daten im Browser oder in DevTools einsehen, debuggen und ändern können. Vermeide das Teilen sensibler oder persönlicher Informationen, die du nicht mit MCP-Clients teilen möchtest.

chrome-devtools-mcp unterstützt offiziell nur Google Chrome und Chrome for Testing. Andere Chromium-basierte Browser funktionieren möglicherweise, dies ist jedoch nicht garantiert, und du kannst auf unerwartetes Verhalten stoßen. Nutzung auf eigenes Risiko. Wir verpflichten uns, Fehlerbehebungen und Support für die neueste Version von Extended Stable Chrome bereitzustellen.

Leistungstools können Trace-URLs an die Google-CrUX-API senden, um Daten zur realen Nutzererfahrung abzurufen. Dies hilft, ein ganzheitliches Leistungsbild zu vermitteln, indem Felddaten neben Labordaten präsentiert werden. Diese Daten werden vom Chrome User Experience Report (CrUX) erhoben. Um dies zu deaktivieren, starte mit dem --no-performance-crux-Flag.

Nutzungsstatistiken

Google erhebt Nutzungsstatistiken (z. B. Erfolgsraten von Tool-Aufrufen, Latenz und Umgebungsinformationen), um die Zuverlässigkeit und Leistung von Chrome DevTools MCP zu verbessern.

Die Datenerhebung ist standardmäßig aktiviert. Du kannst sie deaktivieren, indem du das --no-usage-statistics-Flag beim Starten des Servers übergibst:

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

Google verarbeitet diese Daten gemäß der Google-Datenschutzerklärung.

Die Erhebung von Nutzungsstatistiken durch Google für Chrome DevTools MCP ist unabhängig von den Nutzungsstatistiken des Chrome-Browsers. Das Deaktivieren der Chrome-Metriken führt nicht automatisch zur Deaktivierung dieses Tools und umgekehrt.

Die Erhebung ist deaktiviert, wenn die Umgebungsvariablen CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS oder CI gesetzt sind.

Update-Prüfungen

Standardmäßig prüft der Server regelmäßig die npm-Registry auf Updates und protokolliert eine Benachrichtigung, wenn eine neuere Version verfügbar ist. Du kannst diese Update-Prüfungen deaktivieren, indem du die Umgebungsvariable CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS setzt.

Anforderungen

• Node.js LTS-Version.
• Chrome aktuelle stabile Version oder neuer.
• npm

Erste Schritte

Füge die folgende Konfiguration zu deinem MCP-Client hinzu:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

[!HINWEIS] Die Verwendung von chrome-devtools-mcp@latest stellt sicher, dass dein MCP-Client immer die neueste Version des Chrome DevTools MCP-Servers verwendet.

Wenn du nur grundlegende Browser-Aufgaben ausführen möchtest, verwende den --slim-Modus:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}

Siehe Slim-Tool-Referenz.

MCP-Client-Konfiguration

Für Einrichtungsanweisungen spezifisch für deinen Editor oder Agenten (z. B. Antigravity, Claude Code, Cursor, VS Code) siehe unseren Leitfaden zur Client-Konfiguration.

Dein erster Prompt

Gib den folgenden Prompt in deinen MCP-Client ein, um zu prüfen, ob alles funktioniert:

Check the performance of https://developers.chrome.com

Dein MCP-Client sollte den Browser öffnen und einen Leistungs-Trace aufzeichnen.

[!HINWEIS] Der MCP-Server startet den Browser automatisch, sobald der MCP-Client ein Tool verwendet, das eine laufende Browser-Instanz erfordert. Das bloße Verbinden mit dem Chrome DevTools MCP-Server startet den Browser nicht automatisch.

Tools

Wenn du auf Probleme stößt, wirf einen Blick in unseren Leitfaden zur Fehlerbehebung. Siehe die vollständige Tool-Referenz für eine vollständige Liste aller unterstützten MCP-Funktionen.

Konfiguration

Die vollständige Liste der Serverparameter (z. B. --headless, --isolated, --slim) und die Konfiguration von WebSocket-Verbindungen findest du im Konfigurationsleitfaden.

Erweiterte Nutzung

Für erweiterte Funktionen wie die Verarbeitung gleichzeitiger Sitzungen, persistente Benutzerdatenverzeichnisse, das Verbinden mit einer laufenden Chrome-Instanz anstelle des Startens einer neuen oder das Debuggen auf Android, siehe unseren Leitfaden für erweiterte Nutzung.

Integration als Browser-Subagent

Wenn du agentische Tooling entwickelst und einen integrierten Browser-Subagenten als Teil deines Produkts bereitstellen möchtest, empfehlen wir, auf Chrome DevTools für Agents aufzubauen.

Für eine Referenzimplementierung siehe die Dokumentation zum Gemini-CLI-Browser-Agenten.