Chrome DevTools MCP

Chrome DevTools für Agenten

Chrome DevTools für Agenten (chrome-devtools-mcp) ermöglicht es Ihrem Coding-Agenten (wie Antigravity, Claude, Cursor oder Copilot), einen live Chrome-Browser zu steuern und zu inspizieren. Es fungiert als Model-Context-Protocol (MCP)-Server und gibt Ihrem KI-Coding-Assistenten Zugriff auf die volle Leistungsfähigkeit der Chrome DevTools für zuverlässige Automatisierung, tiefgehendes Debugging und Performance-Analyse. Ein CLI wird ebenfalls für die Nutzung ohne MCP bereitgestellt.

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

Hauptfunktionen

• Performance-Einblicke erhalten: Verwendet 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 quellenzugeordneten Stack-Traces).
• Zuverlässige Automatisierung. Verwendet Puppeteer, um Aktionen in Chrome zu automatisieren und automatisch auf Aktionsergebnisse zu warten.

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 den DevTools einsehen, 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 wird jedoch nicht garantiert, und es kann zu unerwartetem Verhalten kommen. Die Nutzung erfolgt auf eigenes Ermessen. Wir sind bestrebt, Fehlerbehebungen und Support für die neueste Version von Extended Stable Chrome bereitzustellen.

Performance-Tools senden möglicherweise Trace-URLs an die Google CrUX-API, um Daten zur realen Nutzererfahrung abzurufen. Dies hilft, ein ganzheitliches Performance-Bild zu liefern, indem Felddaten neben Labordaten präsentiert werden. Diese Daten werden vom Chrome User Experience Report (CrUX) gesammelt. Um dies zu deaktivieren, führen Sie den Server mit dem Flag --no-performance-crux aus.

Nutzungsstatistiken

Google erhebt 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 die Erfassung 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 in Übereinstimmung mit der Google-Datenschutzerklärung.

Die Erfassung von Nutzungsstatistiken für Chrome DevTools MCP durch Google ist unabhängig von den Nutzungsstatistiken des Chrome-Browsers. Die Deaktivierung von Chrome-Metriken deaktiviert nicht automatisch die Erfassung für dieses Tool und umgekehrt.

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

Update-Prüfungen

Standardmäßig überprüft der Server regelmäßig die npm-Registrierung auf Updates und protokolliert eine Benachrichtigung, wenn eine neuere Version verfügbar ist. Sie können diese Update-Prüfungen deaktivieren, indem Sie die Umgebungsvariable CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS setzen.

Anforderungen

• Node.js LTS-Version.
• 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"]
    }
  }
}

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

Wenn Sie nur grundlegende Browser-Aufgaben ausführen 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

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

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

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

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

[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

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

copilot

/mcp add

code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'

droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest"

# Either MCP only:
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
# Or as a Gemini extension (MCP+Skills):
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

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

mcp-proxy --transport streamablehttp --port 8080 -- npx -y chrome-devtools-mcp@latest

[[mcp_servers]]
name = "chrome-devtools"
transport = "stdio"
command = "npx"
args = ["chrome-devtools-mcp@latest"]

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "chrome-devtools": {
      "type": "local",
      "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
    }
  }
}

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

qodercli mcp add -s user chrome-devtools -- npx chrome-devtools-mcp@latest

Geben Sie den folgenden Prompt in Ihrem MCP-Client ein, um zu prüfen, ob alles funktioniert:

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

Ihr MCP-Client sollte den Browser öffnen und eine Performance-Aufzeichnung starten.

[!NOTE] Der MCP-Server startet den Browser automatisch, sobald der MCP-Client ein Tool verwendet, das eine laufende Browser-Instanz erfordert. Die alleinige Verbindung zum Chrome DevTools MCP-Server startet den Browser nicht automatisch.

Tools

Falls Probleme auftreten, lesen Sie unseren Leitfaden zur Fehlerbehebung.

• Eingabeautomatisierung (10 Tools)
  • click
  • drag
  • fill
  • fill_form
  • handle_dialog
  • hover
  • press_key
  • type_text
  • upload_file
  • click_at
• Navigationsautomatisierung (6 Tools)
  • close_page
  • list_pages
  • navigate_page
  • new_page
  • select_page
  • wait_for
• Emulation (2 Tools)
  • emulate
  • resize_page
• Performance (3 Tools)
  • performance_analyze_insight
  • performance_start_trace
  • performance_stop_trace
• Netzwerk (2 Tools)
  • get_network_request
  • list_network_requests
• Debugging (8 Tools)
  • evaluate_script
  • get_console_message
  • lighthouse_audit
  • list_console_messages
  • take_screenshot
  • take_snapshot
  • screencast_start
  • screencast_stop
• Speicher (12 Tools)
  • take_heapsnapshot
  • close_heapsnapshot
  • compare_heapsnapshots
  • get_heapsnapshot_class_nodes
  • get_heapsnapshot_details
  • get_heapsnapshot_dominators
  • get_heapsnapshot_duplicate_strings
  • get_heapsnapshot_edges
  • get_heapsnapshot_object_details
  • get_heapsnapshot_retainers
  • get_heapsnapshot_retaining_paths
  • get_heapsnapshot_summary
• Erweiterungen (5 Tools)
  • install_extension
  • list_extensions
  • reload_extension
  • trigger_extension_action
  • uninstall_extension
• Drittanbieter (2 Tools)
  • execute_3p_developer_tool
  • list_3p_developer_tools
• WebMCP (2 Tools)
  • execute_webmcp_tool
  • list_webmcp_tools

Konfiguration

Der Chrome DevTools MCP-Server unterstützt die folgenden Konfigurationsoptionen:

• --autoConnect/ --auto-connect Falls angegeben, wird automatisch eine Verbindung zu einem lokal ausgeführten Browser (Chrome 144+) aus dem durch den channel-Parameter identifizierten Benutzerdatenverzeichnis hergestellt (Standardkanal ist stable). Erfordert, dass der Remote-Debugging-Server in der Chrome-Instanz über chrome://inspect/#remote-debugging gestartet wurde.

  • Typ: boolean
  • Standard: false

• --browserUrl/ --browser-url, -u Verbindung zu einer laufenden, debuggable Chrome-Instanz herstellen (z. B. http://127.0.0.1:9222). Weitere Details siehe: https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance.

  • Typ: string
  • Standard: false

• --wsEndpoint/ --ws-endpoint, -w WebSocket-Endpunkt für die Verbindung zu einer laufenden Chrome-Instanz (z. B. ws://127.0.0.1:9222/devtools/browser/). Alternative zu --browserUrl.

  • Typ: string
  • Standard: false

• --wsHeaders/ --ws-headers Benutzerdefinierte Header für die WebSocket-Verbindung im JSON-Format (z. B. '{"Authorization":"Bearer token"}'). Funktioniert nur mit --wsEndpoint.

  • Typ: string
  • Standard: false

• --headless Gibt an, ob der Browser im Headless-Modus (ohne UI) ausgeführt werden soll.

  • Typ: boolean
  • Standard: false

• --executablePath/ --executable-path, -e Pfad zur benutzerdefinierten ausführbaren Chrome-Datei.

  • Typ: string
  • Standard: false

• --isolated Falls angegeben, wird ein temporäres Benutzerdatenverzeichnis erstellt, das nach dem Schließen des Browsers automatisch bereinigt wird. Standardmäßig false.

  • Typ: boolean
  • Standard: false

• --userDataDir/ --user-data-dir Pfad zum Benutzerdatenverzeichnis für Chrome. Standard ist $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE

  • Typ: string
  • Standard: false

• --channel Gibt einen anderen Chrome-Kanal an, der verwendet werden soll. Standard ist die Version des stabilen Kanals.

  • Typ: string
  • Auswahlmöglichkeiten: canary, dev, beta, stable
  • Standard: false

• --logFile/ --log-file Pfad zu einer Datei, in die Debug-Protokolle geschrieben werden sollen. Setzen Sie die Umgebungsvariable DEBUG auf *, um ausführliche Protokolle zu aktivieren. Nützlich für das Einreichen von Fehlerberichten.

  • Typ: string
  • Standard: false

• --viewport Anfängliche Viewport-Größe für die vom Server gestarteten Chrome-Instanzen. Zum Beispiel 1280x720. Im Headless-Modus beträgt die maximale Größe 3840x2160px.

  • Typ: string
  • Standard: false

• --proxyServer/ --proxy-server Proxy-Server-Konfiguration für Chrome, die beim Starten des Browsers als --proxy-server übergeben wird. Siehe https://www.chromium.org/developers/design-documents/network-settings/ für Details.

  • Typ: string
  • Standard: false

• --acceptInsecureCerts/ --accept-insecure-certs Falls aktiviert, werden Fehler im Zusammenhang mit selbstsignierten und abgelaufenen Zertifikaten ignoriert. Mit Vorsicht verwenden.

  • Typ: boolean
  • Standard: false

• --experimentalPageIdRouting/ --experimental-page-id-routing Gibt an, ob pageId für seitenbezogene Tools verfügbar gemacht und Anfragen nach Seiten-ID weitergeleitet werden sollen (nützlich für gleichzeitige Agent-Sitzungen).

  • Typ: boolean
  • Standard: false

• --experimentalDevtools/ --experimental-devtools Gibt an, ob die Automatisierung über DevTools-Ziele aktiviert werden soll.

  • Typ: boolean
  • Standard: false

• --experimentalVision/ --experimental-vision Gibt an, ob koordinatenbasierte Tools wie click_at(x,y) aktiviert werden sollen. Erfordert in der Regel ein Computer-Use-Modell, das anhand von Screenshots genaue Koordinaten erzeugen kann.

  • Typ: boolean
  • Standard: false

• --memoryDebugging/ --memory-debugging, -experimentalMemory Gibt an, ob Speicher-Debugging-Tools aktiviert werden sollen.

  • Typ: boolean
  • Standard: false

• --experimentalStructuredContent/ --experimental-structured-content Gibt an, ob strukturierte formatierte Inhalte ausgegeben werden sollen.

  • Typ: boolean
  • Standard: false

• --experimentalIncludeAllPages/ --experimental-include-all-pages Gibt an, ob alle Arten von Seiten, wie Webviews oder Hintergrundseiten, als Seiten einbezogen werden sollen.

  • Typ: boolean
  • Standard: false

• --experimentalScreencast/ --experimental-screencast Macht experimentelle Screencast-Tools verfügbar (erfordert ffmpeg). Installieren Sie ffmpeg https://www.ffmpeg.org/download.html und stellen Sie sicher, dass es im PATH des MCP-Servers verfügbar ist.

  • Typ: boolean
  • Standard: false

• --experimentalFfmpegPath/ --experimental-ffmpeg-path Pfad zur ausführbaren ffmpeg-Datei für die Screencast-Aufzeichnung.

  • Typ: string
  • Standard: false

• --categoryExperimentalWebmcp/ --category-experimental-webmcp Auf true setzen, um das Debugging von WebMCP-Tools zu aktivieren. Erfordert Chrome 149+ mit den folgenden Flags: --enable-features=WebMCP,DevToolsWebMCPSupport

  • Typ: boolean
  • Standard: false

• --chromeArg/ --chrome-arg Zusätzliche Argumente für Chrome. Gilt nur, wenn Chrome von chrome-devtools-mcp gestartet wird.

  • Typ: array
  • Standard: false

• --blockedUrlPattern/ --blocked-url-pattern Schränkt den Netzwerkzugriff des Browsers ein, indem angegebene URL-Muster blockiert werden (verwendet https://urlpattern.spec.whatwg.org/). Trennt stillschweigend die Verbindung zu Zielen mit blockierten URLs bei der Verbindung und blockiert Laufzeitanfragen (einschließlich Navigationen und Unterressourcen). Akzeptiert ein Array von Mustern.

  • Typ: array
  • Standard: false

• --allowedUrlPattern/ --allowed-url-pattern Schränkt den Netzwerkzugriff des Browsers ein, indem nur angegebene URL-Muster erlaubt werden (verwendet https://urlpattern.spec.whatwg.org/). Erfordert Chrome 149+. Trennt stillschweigend die Verbindung zu Zielen mit nicht erlaubten URLs bei der Verbindung und blockiert Laufzeitanfragen (einschließlich Navigationen und Unterressourcen). Akzeptiert ein Array von Mustern.

  • Typ: array
  • Standard: false

• --ignoreDefaultChromeArg/ --ignore-default-chrome-arg Deaktiviert explizit Standardargumente für Chrome. Gilt nur, wenn Chrome von chrome-devtools-mcp gestartet wird.

  • Typ: array
  • Standard: false

• --categoryEmulation/ --category-emulation Auf false setzen, um Tools im Zusammenhang mit Emulation auszuschließen.

  • Typ: boolean
  • Standard: true

• --categoryPerformance/ --category-performance Auf false setzen, um Tools im Zusammenhang mit Performance auszuschließen.

  • Typ: boolean
  • Standard: true

• --categoryNetwork/ --category-network Auf false setzen, um Tools im Zusammenhang mit Netzwerk auszuschließen.

  • Typ: boolean
  • Standard: true

• --categoryExtensions/ --category-extensions Auf true setzen, um Tools im Zusammenhang mit Erweiterungen einzuschließen. Hinweis: Diese Funktion wird derzeit nur mit einer Pipe-Verbindung unterstützt. autoConnect, browserUrl und wsEndpoint werden mit dieser Funktion erst unterstützt, wenn Version 149 veröffentlicht wird.

  • Typ: boolean
  • Standard: false

• --categoryExperimentalThirdParty/ --category-experimental-third-party Auf true setzen, um Drittanbieter-Entwicklertools zu aktivieren, die von der inspizierten Seite selbst bereitgestellt werden.

  • Typ: boolean
  • Standard: false

• --performanceCrux/ --performance-crux Auf false setzen, um das Senden von URLs aus Performance-Traces an die CrUX-API zu deaktivieren, um Feld-Performance-Daten zu erhalten.

  • Typ: boolean
  • Standard: true

• --usageStatistics/ --usage-statistics Auf false setzen, um die Erfassung von Nutzungsstatistiken abzulehnen. Google erfasst Nutzungsdaten, um das Tool zu verbessern, gemäß der Google-Datenschutzerklärung (https://policies.google.com/privacy). Dies ist unabhängig von den Chrome-Browser-Metriken. Deaktiviert, wenn die Umgebungsvariablen CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS oder CI gesetzt sind.

  • Typ: boolean
  • Standard: true

• --screenshotFormat/ --screenshot-format Überschreibt das Standard-Ausgabeformat, das von take_screenshot verwendet wird, wenn der Aufrufer keines angibt. JPEG und WebP sind etwa 3-5x kleiner als PNG, was hilft, die Kontextgröße in KI-Konversationen zu reduzieren. Wenn nicht gesetzt, bleibt die bestehende Standardeinstellung ("png") erhalten.

  • Typ: string
  • Auswahlmöglichkeiten: jpeg, png, webp
  • Standard: false

• --screenshotQuality/ --screenshot-quality Überschreibt die Standard-Komprimierungsqualität (0-100), die von take_screenshot für JPEG und WebP verwendet wird, wenn der Aufrufer keine angibt. Niedrigere Werte bedeuten kleinere Dateien. Für PNG ignoriert. Wenn nicht gesetzt, bleibt der Puppeteer-Standard erhalten.

  • Typ: number
  • Standard: false

• --screenshotMaxWidth/ --screenshot-max-width Maximale Breite in Pixeln für Screenshots. Wenn das aufgenommene Bild breiter ist, wird es vor der Rückgabe herunterskaliert (unter Beibehaltung des Seitenverhältnisses). Reduziert die Kontextgröße in KI-Konversationen. Wenn nicht gesetzt, erfolgt keine Größenänderung.

  • Typ: number
  • Standard: false

• --screenshotMaxHeight/ --screenshot-max-height Maximale Höhe in Pixeln für Screenshots. Wenn das aufgenommene Bild höher ist, wird es vor der Rückgabe herunterskaliert (unter Beibehaltung des Seitenverhältnisses). Kann mit --screenshot-max-width kombiniert werden; der kleinere Skalierungsfaktor gewinnt. Kein Wert bedeutet keine Größenänderung.

  • Typ: number
  • Standard: false

• --slim Stellt einen reduzierten Satz von 3 Werkzeugen bereit, die nur Navigation, Skriptausführung und Screenshots abdecken. Nützlich für grundlegende Browser-Aufgaben.

  • Typ: boolean
  • Standard: false

• --redactNetworkHeaders/ --redact-network-headers Wenn true, werden einige der als sensibel eingestuften Netzwerk-Header geschwärzt, bevor sie an den Client zurückgegeben werden.

  • Typ: boolean
  • Standard: false

• --allowUnrestrictedPaths/ --allow-unrestricted-paths Wenn gesetzt, deaktiviert dies die standardmäßige Pfadbeschränkung, die gilt, wenn der MCP-Client die Roots-Fähigkeit nicht aushandelt. Standardmäßig sind dateischreibende Werkzeuge auf das temporäre Verzeichnis des Betriebssystems beschränkt, wenn keine Roots konfiguriert sind. Verwenden Sie dies nur, wenn Sie einen vertrauenswürdigen lokalen Client verbinden, der keine MCP-Roots implementiert und Zugriff auf Pfade außerhalb des temporären Verzeichnisses benötigt.

  • Typ: boolean
  • Standard: false

Übergeben Sie sie über die Eigenschaft args in der JSON-Konfiguration. Zum Beispiel:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

Verbindung über WebSocket mit benutzerdefinierten Headern

Sie können eine direkte Verbindung zu einem Chrome WebSocket-Endpunkt herstellen und benutzerdefinierte Header (z. B. zur Authentifizierung) einbinden:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>",
        "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
      ]
    }
  }
}

Um den WebSocket-Endpunkt einer laufenden Chrome-Instanz zu erhalten, rufen Sie http://127.0.0.1:9222/json/version auf und suchen Sie nach dem Feld webSocketDebuggerUrl.

Sie können auch npx chrome-devtools-mcp@latest --help ausführen, um alle verfügbaren Konfigurationsoptionen anzuzeigen.

Konzepte

Gleichzeitige Sitzungen

Die meisten MCP-Clients starten einen Chrome DevTools MCP-Server pro Konversation. Wenn Ihr Client eine einzelne Serverinstanz für gleichzeitige Agenten oder Subagenten gemeinsam nutzt, starten Sie den Server mit --experimentalPageIdRouting. Dies macht pageId auf seitenbezogenen Werkzeugen verfügbar, sodass jeder Agent Werkzeugaufrufe an den Tab weiterleiten kann, mit dem er arbeitet.

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

Wenn Sie mehrere unabhängige MCP-Client-Sitzungen ausführen und jede Sitzung ihr eigenes temporäres Chrome-Profil starten soll, übergeben Sie zusätzlich --isolated. Dies vermeidet die gemeinsame Nutzung des standardmäßigen Chrome DevTools MCP-Benutzerdatenverzeichnisses zwischen diesen Serverinstanzen.

Benutzerdatenverzeichnis

chrome-devtools-mcp startet eine Instanz des stabilen Chrome-Kanals unter Verwendung des folgenden Benutzerdatenverzeichnisses:

• Linux / macOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
• Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

Das Benutzerdatenverzeichnis wird zwischen den Ausführungen nicht geleert und von allen Instanzen von chrome-devtools-mcp gemeinsam genutzt. Setzen Sie die Option isolated auf true, um stattdessen ein temporäres Benutzerdatenverzeichnis zu verwenden, das nach dem Schließen des Browsers automatisch geleert wird.

Verbindung zu einer laufenden Chrome-Instanz

Standardmäßig startet der Chrome DevTools MCP-Server eine neue Chrome-Instanz mit einem dedizierten Profil. Dies ist möglicherweise nicht in allen Situationen ideal:

• Wenn Sie denselben Anwendungsstatus beibehalten möchten, wenn Sie zwischen manuellem Site-Testing und agentengesteuertem Testing wechseln.
• Wenn sich der MCP bei einer Website anmelden muss. Einige Konten verhindern möglicherweise die Anmeldung, wenn der Browser über WebDriver gesteuert wird (der Standardstartmechanismus für den Chrome DevTools MCP-Server).
• Wenn Sie Ihr LLM in einer Sandbox-Umgebung ausführen, aber eine Verbindung zu einer Chrome-Instanz herstellen möchten, die außerhalb der Sandbox läuft.

Starten Sie in diesen Fällen Chrome zuerst und lassen Sie den Chrome DevTools MCP-Server eine Verbindung dazu herstellen. Es gibt zwei Möglichkeiten, dies zu tun:

• Automatische Verbindung (verfügbar in Chrome 144): am besten geeignet, um den Status zwischen manuellem und agentengesteuertem Testing zu teilen.
• Manuelle Verbindung über Remote-Debugging-Port: am besten geeignet, wenn die Ausführung in einer Sandbox-Umgebung erfolgt.

Automatische Verbindung zu einer laufenden Chrome-Instanz

Schritt 1: Remote-Debugging in Chrome einrichten

Führen Sie in Chrome (>= M144) die folgenden Schritte aus, um Remote-Debugging einzurichten:

1. Navigieren Sie zu chrome://inspect/#remote-debugging, um Remote-Debugging zu aktivieren.
2. Folgen Sie der Dialog-Benutzeroberfläche, um eingehende Debugging-Verbindungen zu erlauben oder zu verbieten.

Schritt 2: Chrome DevTools MCP-Server für die automatische Verbindung zu einer laufenden Chrome-Instanz konfigurieren

Um den chrome-devtools-mcp-Server mit der laufenden Chrome-Instanz zu verbinden, verwenden Sie das Kommandozeilenargument --autoConnect für den MCP-Server.

Der folgende Code-Ausschnitt ist eine Beispielkonfiguration für gemini-cli:

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

Schritt 3: Testen Sie Ihr Setup

Stellen Sie sicher, dass Ihr Browser läuft. Öffnen Sie gemini-cli und führen Sie die folgende Eingabeaufforderung aus:

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

[!NOTE] Die Option autoConnect erfordert, dass der Benutzer Chrome startet. Wenn der Benutzer mehrere aktive Profile hat, stellt der MCP-Server eine Verbindung zum Standardprofil her (wie von Chrome bestimmt). Der MCP-Server hat Zugriff auf alle geöffneten Fenster des ausgewählten Profils.

Der Chrome DevTools MCP-Server versucht, eine Verbindung zu Ihrer laufenden Chrome-Instanz herzustellen. Es wird ein Dialogfeld angezeigt, in dem die Benutzerberechtigung abgefragt wird.

Wenn Sie auf Zulassen klicken, öffnet der Chrome DevTools MCP-Server developers.chrome.com und erstellt einen Performance-Trace.

Manuelle Verbindung mittels Portweiterleitung

Sie können eine Verbindung zu einer laufenden Chrome-Instanz herstellen, indem Sie die Option --browser-url verwenden. Dies ist nützlich, wenn Sie den MCP-Server in einer Sandbox-Umgebung ausführen, die das Starten einer neuen Chrome-Instanz nicht zulässt.

Hier ist eine Schritt-für-Schritt-Anleitung, wie Sie eine Verbindung zu einer laufenden Chrome-Instanz herstellen:

Schritt 1: Konfigurieren Sie den MCP-Client

Fügen Sie die Option --browser-url zu Ihrer MCP-Client-Konfiguration hinzu. Der Wert dieser Option sollte die URL der laufenden Chrome-Instanz sein. http://127.0.0.1:9222 ist ein gängiger Standardwert.

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

Schritt 2: Starten Sie den Chrome-Browser

[!WARNING] Das Aktivieren des Remote-Debugging-Ports öffnet einen Debugging-Port auf der laufenden Browser-Instanz. Jede Anwendung auf Ihrem Rechner kann eine Verbindung zu diesem Port herstellen und den Browser steuern. Stellen Sie sicher, dass Sie keine sensiblen Websites durchsuchen, während der Debugging-Port geöffnet ist.

Starten Sie den Chrome-Browser mit aktiviertem Remote-Debugging-Port. Stellen Sie sicher, dass Sie alle laufenden Chrome-Instanzen schließen, bevor Sie eine neue mit aktiviertem Debugging-Port starten. Die von Ihnen gewählte Portnummer muss mit der übereinstimmen, die Sie in der Option --browser-url in Ihrer MCP-Client-Konfiguration angegeben haben.

Aus Sicherheitsgründen verlangt Chrome, dass Sie ein nicht standardmäßiges Benutzerdatenverzeichnis verwenden, wenn Sie den Remote-Debugging-Port aktivieren. Sie können ein benutzerdefiniertes Verzeichnis mit dem Flag --user-data-dir angeben. Dies stellt sicher, dass Ihr reguläres Browserprofil und Ihre Daten nicht für die Debugging-Sitzung freigegeben werden.

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Linux

/usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Windows

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"

Schritt 3: Testen Sie Ihr Setup

Nachdem Sie den MCP-Client konfiguriert und den Chrome-Browser gestartet haben, können Sie Ihr Setup testen, indem Sie eine einfache Eingabeaufforderung in Ihrem MCP-Client ausführen:

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

Ihr MCP-Client sollte eine Verbindung zur laufenden Chrome-Instanz herstellen und einen Performance-Bericht erhalten.

Wenn Sie auf Probleme mit der Portweiterleitung zwischen VM und Host stoßen, lesen Sie den Abschnitt „Remote-Debugging zwischen virtueller Maschine (VM) und Host schlägt fehl“ in docs/troubleshooting.md.

Weitere Details zum Remote-Debugging finden Sie in der Chrome DevTools-Dokumentation.

Debugging von Chrome auf Android

Bitte konsultieren Sie diese Anleitung.

Bekannte Einschränkungen

Siehe Fehlerbehebung.

Integration als Browser-Subagent

Wenn Sie agentenbasierte Werkzeuge entwickeln und einen integrierten Browser-Subagenten als Teil Ihres Produkts bereitstellen möchten, empfehlen wir, auf Chrome DevTools für Agenten aufzubauen.

Eine Referenzimplementierung finden Sie in der Gemini CLI Browser Agent-Dokumentation.