Dies ist ein persönlicher Lern-Fork von ChromeDevTools/chrome-devtools-mcp. Er fügt ein Tutorial in einfachem Englisch und eine praxisnahe Demo hinzu, die Sie von Grund auf durch das Tool führen — ohne Vorkenntnisse in Chrome, DevTools, MCP oder der CLI.

Neu hier? Starten Sie mit demo-health-check/ ↓

✦ In diesem Fork hinzugefügt: zwei End-to-End-Demos

Falls Begriffe wie MCP-Server, Chrome DevTools Protocol, Performance-Trace oder Lighthouse neu für Sie sind — Sie sind nicht allein und hier genau richtig.

Dieser Fork enthält zwei in sich geschlossene Demos — zusammen decken sie 26 der 29 chrome-devtools-mcp-Tools ab.

Demo 1 — demo-health-check/ — Website-Gesundheitsprüfung (CNN.com)

Demo 2 — demo-shopping/ — Agentischer Shopping-Workflow (saucedemo.com)

Ein KI-Agent führt autonom einen vollständigen E-Commerce-Kaufprozess durch: Login → Stöbern → Vergleich über mehrere Tabs → Warenkorb → mobile Emulation → Checkout → Bestellbestätigung. Deckt die 18 Interaktionstools ab, die in Demo 1 nicht verwendet wurden.

Was können Sie sonst noch damit bauen? → use-cases.md

50+ agentische Workflows in den Bereichen QA, Performance, SEO, E-Commerce, Forschung, Sicherheit und persönliche Produktivität — mit den spezifischen Tools, die jeweils verwendet werden, und warum CDP Alternativen überlegen ist.

Was dieses Tool tatsächlich tut

chrome-devtools-mcp gibt Ihrem KI-Assistenten (Claude, Gemini, Cursor, Copilot…) die Fähigkeit, einen echten Chrome-Browser zu steuern und zu untersuchen. Anstatt nur Textdateien zu lesen und zu schreiben, kann Ihre KI:

• Webseiten öffnen und Screenshots machen

• Die Struktur der Seite wie ein Screenreader lesen

• Live-Konsolenfehler und Netzwerkanfragen erfassen

• Lighthouse-Audits durchführen (Barrierefreiheit, SEO, Best Practices)

• Performance-Traces aufzeichnen und Core Web Vitals (LCP, CLS, INP) messen

Sie interagieren damit in einfachem Englisch — "Überprüfe die Performance dieser Seite" — und die KI findet heraus, welches der 29 Tools sie aufrufen muss.

Keine Erfahrung erforderlich

Die Demo wurde für jemanden entwickelt, der noch nie Chrome DevTools geöffnet hat, noch nie einen MCP-Server verwendet hat und gerade erst angefangen hat, einen KI-Coding-Assistenten zu nutzen. Jedes Konzept wird von Grund auf erklärt, bevor es verwendet wird.

Chrome DevTools MCP

chrome-devtools-mcp ermöglicht es Ihrem Coding-Agenten (wie Gemini, Claude, Cursor oder Copilot), einen aktiven Chrome-Browser zu steuern und zu untersuchen. Es fungiert als Model-Context-Protocol (MCP)-Server und gibt Ihrem KI-Coding-Assistenten Zugriff auf die volle Leistung der Chrome DevTools für zuverlässige Automatisierung, tiefgreifendes Debugging und Performance-Analysen.

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

Hauptfunktionen

• Performance-Einblicke erhalten: Nutzt Chrome DevTools, um Traces aufzuzeichnen und umsetzbare Performance-Einblicke zu extrahieren.

• Erweitertes Browser-Debugging: Analysieren Sie Netzwerkanfragen, erstellen Sie Screenshots und überprüfen Sie Browser-Konsolenmeldungen (mit Source-Mapped Stack Traces).

• Zuverlässige Automatisierung. Nutzt puppeteer, um Aktionen in Chrome zu automatisieren und automatisch auf Aktionsergebnisse zu warten.

Haftungsausschlüsse

chrome-devtools-mcp legt Inhalte der Browser-Instanz für MCP-Clients offen, dodurch diese Daten im Browser oder in den DevTools untersuchen, debuggen und ändern können. Vermeiden Sie die Weitergabe sensibler oder persönlicher Informationen, die Sie nicht mit MCP-Clients teilen möchten.

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 es kann zu unerwartetem Verhalten kommen. Verwendung auf eigene Gefahr. Wir verpflichten uns, Korrekturen und Unterstützung für die neueste Version von Extended Stable Chrome bereitzustellen.

Performance-Tools können Trace-URLs an die Google CrUX API senden, um Daten zur echten Nutzererfahrung abzurufen. Dies hilft dabei, ein ganzheitliches Performance-Bild zu erstellen, indem Felddaten neben Labordaten präsentiert werden. Diese Daten werden vom Chrome User Experience Report (CrUX) gesammelt. Um dies zu deaktivieren, starten Sie mit dem Flag --no-performance-crux.

Nutzungsstatistiken

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

Die Datenerfassung ist standardmäßig aktiviert. Sie können dies deaktivieren, indem Sie beim Starten des Servers das Flag --no-usage-statistics übergeben:

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

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

Die Erfassung von Nutzungsstatistiken durch Google für Chrome DevTools MCP ist unabhängig von den Nutzungsstatistiken des Chrome-Browsers. Das Deaktivieren von Chrome-Metriken schließt Sie nicht automatisch von diesem Tool aus und umgekehrt.

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

Anforderungen

• Node.js v20.19 oder eine neuere aktuelle LTS-Wartungsversion.

• Chrome aktuelle stabile Version oder neuer.

• npm

Erste Schritte

Fügen Sie die folgende Konfiguration zu Ihrem MCP-Client hinzu:

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

Wenn Sie nur grundlegende Browseraufgaben erledigen möchten, verwenden Sie den --slim-Modus:

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

Siehe Slim-Tool-Referenz.

MCP-Client-Konfiguration

amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Um den Chrome DevTools MCP-Server zu verwenden, folgen Sie den Anweisungen in der Antigravity-Dokumentation zur Installation eines benutzerdefinierten MCP-Servers. Fügen Sie die folgende Konfiguration zur MCP-Server-Konfiguration hinzu:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222",
        "-y"
      ]
    }
  }
}

Dadurch verbindet sich der Chrome DevTools MCP-Server automatisch mit dem Browser, den Antigravity verwendet. Wenn Sie nicht Port 9222 verwenden, stellen Sie sicher, dass Sie dies entsprechend anpassen.

Chrome DevTools MCP startet die Browser-Instanz bei diesem Ansatz nicht automatisch, da der Chrome DevTools MCP-Server eine Verbindung zum integrierten Browser von Antigravity herstellt. Wenn der Browser noch nicht läuft, müssen Sie ihn zuerst starten, indem Sie auf das Chrome-Symbol oben rechts klicken.

Installation via CLI (nur MCP)

Verwenden Sie die Claude Code CLI, um den Chrome DevTools MCP-Server hinzuzufügen (Anleitung):

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Installation als Plugin (MCP + Skills)

Um Chrome DevTools MCP mit Skills zu installieren, fügen Sie die Marketplace-Registry in Claude Code hinzu:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

Installieren Sie dann das Plugin:

/plugin install chrome-devtools-mcp

Starten Sie Claude Code neu, damit der MCP-Server und die Skills geladen werden (überprüfen Sie dies mit /skills).

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Unter Windows 11

Konfigurieren Sie den Chrome-Installationspfad und erhöhen Sie das Start-Timeout, indem Sie .codex/config.toml aktualisieren und die folgenden env- und startup_timeout_ms-Parameter hinzufügen:

[mcp_servers.chrome-devtools]
command = "cmd"
args = [
    "/c",
    "npx",
    "-y",
    "chrome-devtools-mcp@latest",
]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

Starten Sie die Copilot CLI:

copilot

Starten Sie den Dialog zum Hinzufügen eines neuen MCP-Servers durch Ausführen von:

/mcp add

Konfigurieren Sie die folgenden Felder und drücken Sie CTRL+S, um die Konfiguration zu speichern:

• Server name: chrome-devtools

• Server Type: [1] Local

• Command: npx -y chrome-devtools-mcp@latest

Klicken Sie auf die Schaltfläche zur Installation:

Oder manuell installieren:

Folgen Sie der MCP-Installationsanleitung <