Coding Agent kann Ihre Browsersitzung mit Chrome DevTools MCP debuggen

Sebastian Benz

Alex Rudenko

Veröffentlicht am 11. Dezember 2025

Wir haben den MCP-Server von Chrome DevTools verbessert. Viele unserer Nutzer haben sich gewünscht, dass Coding-Agents direkt mit aktiven Browsersitzungen verbunden werden können.

Mit dieser Verbesserung können Coding-Agents:

1. Vorhandene Browsersitzung wiederverwenden:Angenommen, Sie möchten, dass Ihr Coding-Agent ein Problem behebt, für das eine Anmeldung erforderlich ist. Ihr Coding-Agent kann jetzt direkt auf Ihre aktuelle Browsersitzung zugreifen, ohne dass eine zusätzliche Anmeldung erforderlich ist.
2. Auf aktive Debugging-Sitzungen zugreifen:Coding-Agents können jetzt in der DevTools-UI auf eine aktive Debugging-Sitzung zugreifen. Wenn Sie beispielsweise im Netzwerkbereich der Chrome-Entwicklertools eine fehlgeschlagene Netzwerkanfrage finden, wählen Sie die Anfrage aus und bitten Sie Ihren Coding-Agent, sie zu untersuchen. Das funktioniert auch mit Elementen, die im Elementbereich ausgewählt sind. Wir freuen uns über diese neue Möglichkeit, nahtlos zwischen manueller und KI-basierter Fehlersuche zu wechseln.

In Aktion sehen:

Die Funktion für die automatische Verbindung ist eine Ergänzung der bestehenden Möglichkeiten, mit denen der Chrome DevTools MCP eine Verbindung zu einer Chrome-Instanz herstellen kann. Sie können weiterhin:

• Chrome mit einem MCP-serverspezifischen Nutzerprofil für Chrome-Entwicklertools ausführen (aktuelle Standardeinstellung).
• Verbindung zu einer laufenden Chrome-Instanz mit einem Remote-Debug-Port herstellen
• Mehrere Chrome-Instanzen isoliert ausführen, wobei jede Instanz in einem temporären Profil ausgeführt wird.

Funktionsweise

Wir haben Chrome M145 (derzeit in Canary) eine neue Funktion hinzugefügt, mit der der Chrome DevTools-MCP-Server eine Remote-Debugging-Verbindung anfordern kann. Dieser neue Ablauf basiert auf den vorhandenen Remote-Debugging-Funktionen von Chrome. Standardmäßig sind Verbindungen für das Remote-Debugging in Chrome deaktiviert. Entwickler müssen die Funktion zuerst explizit aktivieren, indem sie chrome://inspect#remote-debugging aufrufen.

Wenn der Chrome DevTools-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. Um Missbrauch durch böswillige Akteure zu verhindern, zeigt Chrome jedes Mal, wenn der Chrome DevTools MCP-Server eine Remote-Debugging-Sitzung anfordert, ein Dialogfeld an, in dem der Nutzer um Erlaubnis gebeten wird, die Remote-Debugging-Sitzung zuzulassen. Außerdem wird in Chrome während einer aktiven Debugging-Sitzung oben das Banner „Chrome wird von automatisierter Testsoftware gesteuert“ angezeigt.

Jetzt starten

Um die neuen Funktionen für das Remotedebugging zu nutzen. Sie müssen zuerst das Remote-Debugging in Chrome aktivieren und dann den Chrome DevTools MCP-Server so konfigurieren, dass die neue Funktion für automatische Verbindungen verwendet wird.

Schritt 1: Remote-Debugging in Chrome einrichten

So richten Sie das Remote-Debugging in Chrome ein:

1. Rufen Sie chrome://inspect/#remote-debugging auf, um das Remote-Debugging zu aktivieren.
2. Folgen Sie der Benutzeroberfläche des Dialogfelds, um eingehende Debugging-Verbindungen zuzulassen oder zu blockieren.

Schritt 2: Chrome DevTools-MCP-Server so konfigurieren, dass er automatisch eine Verbindung zu einer laufenden Chrome-Instanz herstellt

Verwenden Sie das Befehlszeilenargument --autoConnect für den MCP-Serversatz, um den chrome-devtools-mcp-Server mit der ausgeführten Chrome-Instanz zu verbinden.

Das folgende Code-Snippet ist ein Beispiel für eine Konfiguration für gemini-cli:

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

Schritt 3: Einrichtung testen

Öffnen Sie nun gemini-cli und führen Sie den folgenden Prompt aus:

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

Der Chrome DevTools MCP-Server versucht, eine Verbindung zu Ihrer laufenden Chrome-Instanz herzustellen. Es wird ein Dialogfeld angezeigt, in dem der Nutzer um die Berechtigung gebeten wird:

Wenn Sie auf Zulassen klicken, wird der MCP-Server der Chrome-Entwicklertools developers.chrome.com geöffnet und ein Leistungstrace wird erstellt.

Eine vollständige Anleitung finden Sie in der README-Datei auf GitHub.

Coding-Agent die Debugging-Sitzung übernehmen lassen

Da Sie eine Verbindung zu einer aktiven Chrome-Instanz herstellen können, müssen Sie sich nicht zwischen Automatisierung und manueller Steuerung entscheiden. Sie können die Entwicklertools selbst verwenden oder eine Debugging-Aufgabe an Ihren Coding-Agent übergeben. Wenn Sie ein Problem auf Ihrer Website entdecken, können Sie die Entwicklertools öffnen, um das Element zu identifizieren, das das Problem verursacht. Wenn Sie möchten, dass Ihr Coding-Agent das Problem behebt, können Sie jetzt den Chrome DevTools MCP-Server verwenden. Sie können das Element im Bereich „Elements“ (Elemente) auswählen und den Coding-Agent bitten, das Problem zu untersuchen.

Das funktioniert auch für das Netzwerk-Panel. Sie können eine Netzwerkanfrage auswählen und Ihren Coding-Agent bitten, sie zu untersuchen.

Das ist aber nur der erste Schritt. Wir planen, nach und nach immer mehr Paneldaten für Coding-Agents über den Chrome-Entwicklertools-MCP-Server verfügbar zu machen. Mehr dazu demnächst!