In diesem Artikel lernen Sie:
- Was Chrome DevTools for Agents (
chrome-devtools-mcp) für KI-gesteuerte Browser-Automatisierung bietet. - Welche Einschränkungen es hat und wie Bright Datas Browser API diese löst.
- Wie Sie Ihren bevorzugten KI-Agenten (z. B. Gemini CLI, Claude Code usw.) mit
chrome-devtools-mcpverbinden und einen entfernten Browser über die Browser API steuern.
Los geht’s!
Was ist Chrome DevTools for Agents?
chrome-devtools-mcp, auch bekannt als “Chrome DevTools for agents,” ist ein Open-Source-MCP-Server, der KI-Coding-Agenten die Kontrolle über einen Chromium-basierten Browser über das CDP (Chrome DevTools Protocol) ermöglicht.
Im Detail erlaubt es KI-Agenten, Seiten zu navigieren, mit Web-Elementen zu interagieren, Netzwerkanfragen zu inspizieren, JavaScript auszuführen, Screenshots zu erfassen, Browser-Probleme zu debuggen und die Leistung zu analysieren. Im Hintergrund stellt es Chrome-DevTools-Funktionen als MCP-Tools bereit, die KI-Coding-Agenten zur Automatisierung und Inspektion von Browser-Sitzungen nutzen können.
Das Projekt ist auf GitHub unter der Apache-2.0-Lizenz verfügbar und hat mehr als 52.000 GitHub-Sterne erhalten.
Aktuelle Einschränkungen von chrome-devtools-mcp und wie man sie behebt
chrome-devtools-mcp ist ein leistungsstarkes Tool zur Steuerung von Browser-Sitzungen, insbesondere für Debugging und Leistungsanalyse. Gleichzeitig unterliegt es noch einigen der häufigen Herausforderungen im Zusammenhang mit Browser-Automatisierung:
- Blockaden: Websites können automatisierte Browser-Sitzungen erkennen und mit CAPTCHAs, Fehlern oder anderen Einschränkungen reagieren, was Ihren Arbeitsablauf unterbricht. Dies liegt daran, dass die Technologie eine neue Chrome-Sitzung im Headless-Modus startet. Solche Sitzungen haben einen begrenzten Browser-Verlauf und Nutzerkontext, was es Websites leichter macht, sie als automatisiert zu identifizieren. Außerdem nutzen reguläre Nutzer Browser mit aktivierter GUI, nicht im Headless-Modus.
- Ressourcenverbrauch: Das lokale Ausführen mehrerer Tabs oder Browser-Instanzen kann erhebliche Systemressourcen verbrauchen. Ein einzelner Chrome-Tab kann Hunderte von Megabyte RAM nutzen, was groß angelegte gleichzeitige Automatisierung für die lokale Infrastruktur anspruchsvoll macht.
Diese Einschränkungen beeinträchtigen sowohl die Zuverlässigkeit als auch die Skalierbarkeit der Browser-Automatisierung, insbesondere bei Unternehmens-Workloads. Eine ideale Lösung wäre, chrome-devtools-mcp zu ermöglichen, Cloud-Browser zu steuern, die für groß angelegte Automatisierung entwickelt und mit Anti-Bot-Funktionen ausgestattet sind. Genau das bietet die Browser API von Bright Data.
Bright Data Browser API als Lösung
Die Browser API von Bright Data behebt die Einschränkungen von chrome-devtools-mcp, indem die Browser-Ausführung von Ihrem lokalen Rechner auf eine vollständig verwaltete, cloudbasierte Infrastruktur verlagert wird, die für Skalierung konzipiert ist.
Anstatt Browser lokal auszuführen und zu verwalten, können Sie Chrome DevTools for agents über einen CDP-Endpunkt mit der Browser API verbinden. Die Browser API bietet vorkonfigurierte Cloud-Browser-Sitzungen mit Funktionen wie Proxy-Rotation, CAPTCHA-Lösung und erweiterten Fingerprinting-Fähigkeiten.
Wichtig: Die Browser API ist in der kostenlosen Stufe von Bright Data verfügbar, die 5.000 kostenlose Credits pro Monat umfasst.
Hinter dem Dienst steht die Proxy-Infrastruktur von Bright Data mit einem Residential-Netzwerk von mehr als 400 Millionen IPs. Dies unterstützt globales Geo-Targeting und unbegrenzte gleichzeitige Browser-Sitzungen bei einer Verfügbarkeit von 99,99 % und einer Erfolgsrate von 99,95 %.
Wie man Chrome DevTools for Agents mit Bright Datas Browser API integriert
In diesem Kapitel erfahren Sie, wie Sie chrome-devtools-mcp in Ihrem KI-Agenten konfigurieren. Sie konfigurieren es so, dass es sich über Bright Datas Browser API mit stealth-fähigen und unendlich skalierbaren Cloud-Browser-Sitzungen verbindet.
Hinweis: Dieser Abschnitt konzentriert sich auf Gemini CLI. Sie können die gleichen Schritte auf andere KI-Agenten-Harnesses übertragen, wie Claude Code, OpenAI Codex, OpenCode und andere.
Folgen Sie den Anweisungen unten!
Voraussetzungen
Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:
Grundlegende Kenntnisse darüber, wie MCP funktioniert, und die von Chrome DevTools for agents bereitgestellten Tools sind hilfreich.
Schritt #1: Eine Bright Data Browser API einrichten
Rufen Sie zunächst die CDP-basierte Remote-Verbindungs-URL für die Bright Data Browser API ab.
Falls noch nicht geschehen, erstellen Sie ein Bright Data-Konto. Wenn Sie bereits ein Konto haben, melden Sie sich an, um auf das Kontrollfeld zuzugreifen.
Wählen Sie als Nächstes die Option “Web Access > Web Access API” im linken Menü aus:
Falls Sie bereits einen Browser-API-Eintrag in der Tabelle Meine APIs haben (den Eintrag “browser_api”, wie unten gezeigt), rufen Sie die API-Seite auf:
Andernfalls klicken Sie auf das Dropdown-Menü der Schaltfläche “API erstellen” und wählen Sie “Browser API”:
Dies öffnet den Einrichtungsassistenten für die Browser API. Geben Sie Ihrer Browser API einen Namen und konfigurieren Sie sie nach Ihren Bedürfnissen:
Sobald Sie fertig sind, klicken Sie auf “API hinzufügen”, um eine Browser API zu erstellen. Öffnen Sie dann deren Detailseite:
Auf dieser Seite finden Sie die Verbindungsdetails für CDP-basierte Integrationen unter “Puppeteer / Playwright”. Die Browser API WebSocket CDP URL folgt diesem Format:
wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222Um das Browser-API-Passwort anzuzeigen, klicken Sie auf “Anzeigen” neben dem Passwort. Geben Sie den per E-Mail erhaltenen Multi-Faktor-Authentifizierungscode ein.
Sie haben nun die CDP-Verbindungs-URL, die Sie zur Konfiguration von chrome-devtools-mcp für die Remote-Browser-Steuerung benötigen. Ausgezeichnet!
Schritt #2: Browser API in Gemini CLI über chrome-devtools-mcp konfigurieren
Integrieren Sie chrome-devtools-mcp in Ihren KI-Agenten und weisen Sie ihn an, entfernte Anti-Detect-Browser-Sitzungen über Bright Datas Browser API zu steuern. In Gemini CLI erreichen Sie dies mit folgendem Befehl:
gemini mcp add --scope project chrome-devtools npx chrome-devtools-mcp@latest -- --wsEndpoint='wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222'Hinweis: Stellen Sie sicher, dass Sie die Platzhalter durch Ihre tatsächliche Browser API CDP-Verbindungs-URL im wsEndpoint-Argument ersetzen.
Im Terminal sehen Sie eine Meldung, dass der chrome-devtools MCP-Server hinzugefügt wurde:
Beachten Sie Folgendes:
--scope projectkonfiguriert den MCP-Server lokal innerhalb Ihres Projekts. Entfernen Sie diese Option, wenn Sie den MCP-Server global konfigurieren möchten.--wsEndpoint='wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222'weistchrome-devtools-mcpan, sich mit dem Bright Data Browser API Endpunkt zu verbinden.
Hinweis: Die Verwendung des wsEndpoint-Arguments ist hier wichtig. Die chrome-devtools-mcp-Dokumentation erwähnt, dass wsEndpoint eine Alternative zu browserUrl ist. Wenn Sie jedoch die Browser API CDP-URL über browserUrl bereitstellen, schlägt die Integration mit folgendem Fehler fehl: “Request cannot be constructed from a URL that includes credentials”.
Der Befehl erzeugt eine .gemini/settings.json-Datei im Ordner Ihres Projekts mit dieser Konfiguration:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--wsEndpoint=wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222"
]
}
}
}Alternativ können Sie diese Datei manuell erstellen.
Extra: Sie können chrome-devtools-mcp auch in Ihrem bevorzugten KI-Agenten konfigurieren. Führen Sie beispielsweise in Claude Code aus:
claude mcp add chrome-devtools --scope project -- npx -- -y chrome-devtools-mcp@latest --wsEndpoint='wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222'Hervorragend! Ihr KI-Agent sollte nun Zugriff auf die Chrome-DevTools-Tools für Agenten über MCP haben, konfiguriert für die Verbindung zu entfernten Browser-Sitzungen, die von der Browser API bereitgestellt werden.
Schritt #3: Prüfen, dass die Integration funktioniert
Starten Sie Gemini CLI (oder Ihren bevorzugten KI-Agenten) in Ihrem Projektordner:
geminiFühren Sie dann den Befehl /mcp aus, um die verfügbaren MCP-Server anzuzeigen:
Sie sollten den chrome-devtools MCP-Server mit seinen 29 verfügbaren Tools sehen, darunter:
| Tool | Beschreibung |
|---|---|
navigate_page |
Navigiert zu URLs, lädt Seiten neu oder bewegt sich vor und zurück im Browser-Verlauf. |
click |
Klickt ein über den Seiten-Snapshot identifiziertes Element, mit optionaler Unterstützung für Doppelklicks. |
fill |
Gibt Text in Eingabefelder oder Textbereiche ein oder wählt Optionen aus Dropdown-Menüs. |
fill_form |
Füllt mehrere Formularfelder, Kontrollkästchen, Radiobuttons und Auswahlfelder in einem Vorgang aus. |
press_key |
Drückt Tastatur-Tasten oder Kombinationen für Tastaturkürzel, Navigation und Interaktionen, die über andere Eingabetools nicht verfügbar sind. |
type_text |
Tippt Text in ein zuvor fokussiertes Eingabefeld mittels Tastatursimulation. |
hover |
Bewegt den Zeiger über ein Seitenelement, nützlich zum Auslösen von Hover-basierten Menüs oder Interaktionen. |
wait_for |
Wartet, bis ein bestimmter Text auf der Seite erscheint, bevor mit nachfolgenden Aktionen fortgefahren wird. |
list_pages |
Listet alle derzeit geöffneten Browser-Seiten und ihre Kennungen für nachfolgende Interaktionen auf. |
new_page |
Öffnet einen neuen Browser-Tab und navigiert zu einer angegebenen URL. |
take_snapshot |
Erfasst den Accessibility-Baum der Seite und zeigt Elemente und eindeutige Kennungen für nachfolgende Interaktionen an. |
evaluate_script |
Führt JavaScript innerhalb der Seite aus und gibt JSON-serialisierbare Ergebnisse aus dem Browser-Kontext zurück. |
list_network_requests |
Listet kürzliche Netzwerkanfragen der Seite auf, optional gefiltert nach Ressourcentyp. |
get_network_request |
Inspiziert eine bestimmte Netzwerkanfrage, einschließlich Headern, Anfragekörper und Antwortdaten. |
take_screenshot |
Erfasst einen Screenshot der aktuellen Seite, des Viewports, der ganzen Seite oder eines bestimmten Elements. |
Fantastisch! Dies bestätigt, dass chrome-devtools-mcp korrekt konfiguriert ist und dass seine Browser-Automatisierungstools für Ihren KI-Agenten verfügbar sind.
Der letzte Schritt besteht darin, zu überprüfen, ob er diese Tools nutzen kann, um über die Bright Data Browser API mit einer entfernten Browser-Sitzung zu interagieren.
Schritt #4: Chrome DevTools for Agents + Browser API testen
Um zu prüfen, ob Chrome DevTools for agents die konfigurierte Browser-API-Sitzung steuern kann, testen Sie es gegen eine komplexe Website, die durch Anti-Bot-Maßnahmen geschützt ist, wie Booking.com.
Probieren Sie die Integration mit einer realen Aufgabe wie dieser aus:
Open the Booking.com page in a browser and search for hotels in Barcelona for two people from September 23 to 24. Apply the "4-star" filter and sort the results by lowest price. Extract the first 10 results with the hotel name, nightly price, rating, and review count.Führen Sie den Prompt aus, und hier ist, was Sie sehen sollten:
Insbesondere hat der Gemini CLI-Agent die Aufgabe wie folgt erledigt:
- Rief
navigate_pageauf, um Booking.com zu erreichen. - Verwendete das Tool
list_pages, um die verfügbare Browser-Seite zu identifizieren. - Verwendete eine Kombination aus den Tools
clickundtake_snapshot, um die relevanten Elemente zu finden und die angeforderten Daten auszuwählen. - Nutzte
evaluate_script, um zusätzliche erforderliche Interaktionen durchzuführen und die Ziel-Ergebnisseite zu erreichen. - Setzte erneut
take_snapshotein, um die Struktur der Ergebnisseite zu inspizieren. - Verwendete
evaluate_script, um die erforderlichen Daten mit einem benutzerdefinierten JavaScript-Skript zu extrahieren. - Gab die extrahierten Daten in einer Tabelle zurück.
Unten ist die vom Agenten erzeugte Ausgabe:
Beachten Sie, wie die abgerufenen Daten den direkt auf Booking.com angezeigten Ergebnissen sehr ähnlich sind:
Dieses einfache Beispiel zeigte, dass Chrome DevTools for agents, verbunden über MCP mit Gemini CLI, über eine entfernte Browser-API-Sitzung mit Booking.com interagieren kann.
Booking.com ist ein nützlicher Testfall, da seine Anti-Bot-Schutzmaßnahmen die Browser-Automatisierung erschweren. In dieser Konfiguration übernimmt die Browser API die Browser-Sitzung und die Infrastruktur, die für den Zugriff auf die Website erforderlich ist, während chrome-devtools-mcp dem KI-Agenten die Tools gibt, die er zur Interaktion mit dem Browser benötigt.
Das Ergebnis ist ein KI-Agent, der komplexe Browser-Interaktionen durchführen kann, ohne dass Sie den Browser lokal ausführen und verwalten müssen. Mission erfüllt!
Weitere mögliche Beispiele
Die Kombination aus chrome-devtools-mcp und der Bright Data Browser API kann viele weitere Anwendungsfälle für Browser-Automatisierung, Debugging und Datenextraktion unterstützen.
Hier sind einige Prompts, die Sie für verschiedene Szenarien ausprobieren können:
- Daten aus Netzwerkanfragen nach Interaktion extrahieren:
Open a website, search for "web scraping," inspect the network requests generated when the results load, identify the request returning the search results, and extract the first 20 results from its response. - API-Antworten inspizieren:
Open a product page, identify the network request returning its product data, inspect the request and response, and extract the product name, price, availability, and rating. - Seitenleistung analysieren:
Open a website and analyze its performance. Report the page load time, largest contentful paint, cumulative layout shift, and other relevant performance metrics, then identify potential bottlenecks. - JavaScript-Fehler debuggen:
Open a website, inspect the console for JavaScript errors and warnings, identify the affected scripts or pages, and explain the most likely causes based on the available debugging information.
Durch chrome-devtools-mcp ist Ihr Agent nicht auf das Klicken von Links und das Lesen von Seiteninhalten beschränkt. Stattdessen kann er Konsoleninspektion, Leistungsanalyse, Netzwerküberwachung und mehr durchführen. Im Vergleich zu Lösungen wie Playwright MCP eignet es sich dadurch besser für Anwendungsfälle, die eine tiefere Browser-Inspektion und Debugging erfordern.
Fazit
In diesem Artikel haben Sie gelernt, was Chrome DevTools for agents ist und wie es die Browser-Automatisierung über CDP unterstützt. Konkret haben Sie gesehen, wie Sie es mit Bright Datas Browser API kombinieren können, damit Ihr KI-Agent skalierbare, cloudbasierte Browser-Sitzungen mit integrierten Anti-Bot-Funktionen ausführen kann.
Das Ergebnis ist eine KI-gesteuerte Browser-Automatisierungslösung, die auf Unternehmensebene skalieren kann. Mit derselben Integration können Sie auch agentenbasierte Browser-Workflows aufbauen, die von einer Cloud-Browser-Infrastruktur unterstützt werden.
Registrieren Sie sich für ein Bright Data-Konto und entdecken Sie unsere KI-fähigen Lösungen für Web-Daten-Scraping und Browser-Automatisierung!
