Chrome DevTools MCP: KI-gestützte Browser-Automatisierung und Debugging

Um dein Verständnis für KI-Agenten zu vertiefen und zu sehen, wie Tools wie Chrome DevTools MCP ins Gesamtbild passen, schau dir den DataCamp-Kurs Introduction to AI Agents oder den Lernpfad AI Agent Fundamentals an.

Chrome DevTools MCP ist ein offizieller Model-Context-Protocol-Server des Chrome-DevTools-Teams, der KI-Coding-Assistenten erlaubt, Chrome mit natürlicher Sprache zu steuern. Statt Skripte zu schreiben, sagst du deinem KI-Assistenten, was du willst („Navigiere zu dieser Seite und prüfe auf Konsolenfehler“ oder „Fülle dieses Formular aus und mach einen Screenshot“), und er übernimmt die technischen Details.

Der Server gibt dir Zugriff auf leistungsstarke Tools für Browserautomatisierung und Debugging. Er basiert auf Puppeteer, ist dadurch robust und läuft komplett lokal auf deinem Rechner. Du musst keine einzige Zeile Puppeteer-Code schreiben.

In diesem Tutorial lernst du, wie du diesen MCP-Server mit KI-Coding-Assistenten wie Claude, Cursor und Cline nutzt. Wir behandeln Installation und Konfiguration und gehen dann in die Kernfunktionen: Browserautomatisierung, Debugging und Inspektion. Als durchgängiges Beispiel verwenden wir Conduit (demo.realworld.io), eine Blogging-Plattform im Medium-Stil.

Wenn du neu beim Model Context Protocol bist, empfehle ich dir diesen umfassenden MCP-Guide für einen Deep Dive, wie MCP KI-Modelle mit externen Tools verbindet. Sieh dir außerdem unser Claude für Chrome Tutorial und den Überblick über die besten KI-Browser an. Für einen anderen Ansatz zur KI-Browserautomatisierung lies unser ChatGPT Atlas Tutorial.

TL;DR

• Chrome DevTools MCP ist ein offizieller MCP-Server, der KI-Coding-Assistenten erlaubt, Chrome per natürlicher Sprache zu steuern

• Es stellt 26 Tools in 6 Kategorien bereit: Eingabeautomatisierung, Navigation, Debugging, Netzwerk, Performance und Emulation

• Installation mit claude mcp add chrome-devtools npx chrome-devtools-mcp@latest für Claude Code (andere Clients haben eine ähnliche Einrichtung)

• Automatisiere Browseraufgaben wie Navigation, Formularausfüllen und Screenshot-Erstellung, ohne Puppeteer-Skripte zu schreiben

• Debugge Web-Apps, indem du Konsolenfehler und Netzwerk-Requests inspizierst und JavaScript ausführst – alles im Dialog

• Baue Frontends iterativ, indem die KI bei jedem Schritt Screenshots macht, um die eigenen Ergebnisse zu prüfen

Was ist Chrome DevTools MCP?

So funktioniert die Architektur unter der Haube.

Der Server stellt 26 Tools bereit, gruppiert in 6 Kategorien:

• Eingabeautomatisierung (7 Tools): click, drag, fill, fill_form, handle_dialog, hover, upload_file
• Navigation (7 Tools): navigate_page, new_page, list_pages, select_page, close_page, navigate_page_history, wait_for
• Debugging (4 Tools): evaluate_script, list_console_messages, take_screenshot, take_snapshot
• Netzwerk (2 Tools): list_network_requests, get_network_request
• Performance (3 Tools): performance_start_trace, performance_stop_trace, performance_analyze_insight
• Emulation (3 Tools): emulate_cpu, emulate_network, resize_page

Browserautomatisierung wird zum Gespräch. Statt Puppeteer-Skripte zu schreiben und CSS-Selektoren zu debuggen, beschreibst du in natürlicher Sprache, was du willst. Der KI-Assistent kümmert sich um die Technik.

Chrome DevTools MCP vs. traditionelle Ansätze

Mit diesen Tools kann dir dein KI-Assistent helfen:

• Frontends iterativ zu bauen, indem der Agent bei jedem Schritt Screenshots macht
• User-Flows Ende-zu-Ende zu testen – etwa Registrieren, durch Features navigieren und jeden Schritt verifizieren
• Probleme zu debuggen, indem Konsolenfehler und Netzwerk-Requests geprüft werden, ohne DevTools manuell zu öffnen
• Visuelle Dokumentation zu automatisieren, etwa durch Screenshots verschiedener Seiten oder Zustände
• Daten aus Webseiten zu extrahieren, indem JavaScript direkt im Seitenkontext ausgeführt wird

All das löst du per natürlicher Sprache statt mit Puppeteer-Skripten.

Chrome DevTools MCP funktioniert mit Claude Desktop, Cursor, Cline und VSCode Copilot. Da es einer von vielen MCP-Servern ist, kannst du ihn mit anderen kombinieren – etwa Dateisystemzugriff, Datenbank-Tools und APIs – und so Workflows über mehrere Tools hinweg aufbauen.

Chrome DevTools MCP: Installation und Setup

Du brauchst Folgendes:

• Node.js und npm auf deinem Rechner
• Einen MCP-kompatiblen KI-Coding-Assistenten (wir verwenden Claude Code in diesem Tutorial)
• Chrome-Browser (Puppeteer kümmert sich automatisch darum, du musst nichts konfigurieren)

Grundkenntnisse in den Browser-DevTools sind hilfreich, aber nicht zwingend.

Chrome DevTools MCP installieren

Chrome DevTools MCP läuft über die MCP-Konfiguration deines KI-Assistenten. Das Setup variiert je nach verwendetem Assistenten leicht. Wir zeigen die Installation für Claude Code, aber Editoren wie Cursor, Cline und VSCode Copilot sind ähnlich.

Für Claude Code führe diesen Befehl im Terminal aus:

claude mcp add chrome-devtools npx chrome-devtools-mcp@latestBereitgestellt von

Dieser Befehl registriert den Chrome-DevTools-MCP-Server in Claude Code. Der Server läuft über npx, lädt also das Paket und führt es aus, ohne es dauerhaft zu installieren. Mit @latest bekommst du die aktuelle Version.

Starte nach dem Befehl Claude Code neu, damit der neue Server geladen wird.

Wenn du einen anderen KI-Coding-Assistenten nutzt

Andere MCP-Clients haben ähnliche Installationswege – manche nutzen Befehle, andere Konfigurationsdateien oder One-Click-Install-Buttons. Sieh auf der Chrome DevTools MCP GitHub-Seite nach spezifischen Anleitungen für Cursor, Cline, Gemini CLI, Windsurf und weitere unterstützte Clients.

Dein Setup testen

Lass uns mit einem einfachen Befehl prüfen, ob alles funktioniert:

Navigiere zu demo.realworld.io und mach einen ScreenshotBereitgestellt von

Folgendes solltest du sehen:

• Chrome startet (du siehst das Fenster, außer du hast Headless-Modus konfiguriert)
• Die Conduit-Startseite lädt
• Dein KI-Assistent erstellt und zeigt einen Screenshot

Wenn etwas schiefgeht, prüfe diese typischen Ursachen:

• Node.js-Version: Chrome DevTools MCP benötigt Node.js v20.19 oder neuer
• npm-Berechtigungen: Stelle sicher, dass npm Pakete installieren kann
• Neustart nötig: Dein KI-Assistent muss nach Konfigurationsänderungen neu gestartet werden
• Ort der Config-Datei: Prüfe, ob du die richtige MCP-Konfigurationsdatei für deinen Assistenten bearbeitet hast

Grundlagen der Browserautomatisierung

Chrome DevTools MCP bietet sechs zentrale Tools zur Interaktion mit Webseiten. Nutze navigate_page zum Laden von URLs, click zur Interaktion mit Elementen, fill und fill_form zum Eingeben von Text, hover für Hover-Effekte und take_screenshot für Bildaufnahmen. Diese Tools decken den Großteil der Automatisierungsaufgaben im Browser ab.

Navigation und Screenshots

Lass uns eine Seite laden. Sag deinem KI-Assistenten:

Navigate to demo.realworld.ioBereitgestellt von

Die KI nutzt das Tool navigate_page, Chrome öffnet sich und die Conduit-Startseite lädt. Du siehst das Browserfenster, außer du hast Headless-Modus eingestellt.

Zur Dokumentation des Sichtbaren frag einfach:

Take a screenshot of the homepageBereitgestellt von

Die KI erfasst die aktuelle Seite mit take_screenshot und zeigt dir das Ergebnis. Praktisch für visuelle Doku oder Layout-Checks.

Interaktion mit Elementen

Du kannst mit beliebigen Elementen interagieren, ohne CSS-Selektoren zu schreiben oder IDs nachzuschlagen. Beschreibe einfach, was passieren soll:

Click the Sign in linkBereitgestellt von

Die KI ermittelt das gemeinte Element und klickt es mit dem Tool click. Die Anmeldeseite lädt.

Du kannst auch über Elemente hovern:

Hover over the Sign up linkBereitgestellt von

Die KI nutzt das Tool hover. Falls ein Tooltip oder Dropdown existiert, erscheint er.

Formulare ausfüllen

Formulare werden schnell mühsam, wenn du Skripte schreibst. Mit Chrome DevTools MCP beschreibst du einfach, was wo eingetragen werden soll.

Fill one field at a time:
Fill in the email field with [email protected]
Fill in the password field with testpass123
Or fill multiple fields at once:
Fill out the sign-in form with email [email protected] and password testpass123Bereitgestellt von

Die KI nutzt fill_form und erledigt alle Felder in einem Rutsch. So sieht das ausgefüllte Formular aus:

Die KI erkennt die richtigen Eingabefelder anhand deiner Beschreibung. Du musst kein HTML anfassen.

Debugging und Inspektion

Chrome DevTools MCP bietet drei zentrale Debugging-Tools: list_console_messages für Konsolenausgaben, list_network_requests für Netzwerkaktivität und evaluate_script zum Ausführen von JavaScript und Extrahieren von Daten.

Mit diesen Tools führst du über deinen KI-Assistenten ein Gespräch. Du stellst Fragen in natürlicher Sprache, und die KI übersetzt sie im Hintergrund in MCP-Toolaufrufe.

So sieht das aus:

Der KI-Assistent versteht deine Absicht, führt die passenden Chrome-DevTools-Tools aus und präsentiert die Ergebnisse lesbar. Schauen wir uns das in der Praxis an.

Konsoleninspektion

Konsolenfehler sind meist die erste Anlaufstelle, wenn etwas bricht. Statt DevTools manuell zu öffnen, frag einfach deinen KI-Assistenten:

Navigate to demo.realworld.io and check the console for any errorsBereitgestellt von

Die KI lädt die Seite und prüft die Konsole mit list_console_messages. Das findet sie:

Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/articles'
from origin 'https://demo.realworld.io' has been blocked by CORS policy
Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/tags'
from origin 'https://demo.realworld.io' has been blocked by CORS policyBereitgestellt von

Diese CORS-Fehler (Cross-Origin Resource Sharing) – also eine Browsersicherheitsfunktion, die Anfragen auf andere Domains einschränkt – erklären, warum die Seite „Loading articles…“ und „Loading tags…“ statt echter Inhalte anzeigt:

Du kannst nachfassen und die KI bitten, diese Meldungen zu filtern und zu interpretieren:

Are there any errors or warnings on this page?Bereitgestellt von

Die KI analysiert die Konsolenausgabe und meldet: „Ja, zwei CORS-Fehler blockieren API-Requests für Artikel und Tags.“

So bekommst du sofort Einblick in die Ursache, ohne die DevTools-Konsole manuell zu öffnen.

Überblick über Netzwerk-Requests

Konsolenfehler deuten oft auf Netzwerkprobleme hin. Um zu verstehen, was mit deinen Requests passiert, prüfe die Netzwerkaktivität:

Show me what network requests are made on the homepageBereitgestellt von

Die KI nutzt list_network_requests und gibt eine Liste aller Requests zurück. Du siehst erfolgreiche (CSS, Fonts, JavaScript-Dateien) und fehlgeschlagene Anfragen:

https://demo.realworld.io/ GET [success - 200]
https://demo.realworld.io/main.css GET [success - 200]
https://demo.realworld.io/main.js GET [success - 200]
https://conduit.productionready.io/api/tags GET [failed - 307]
https://conduit.productionready.io/api/articles?limit=10&offset=0 GET [failed - 307]
https://api.realworld.io/api/tags GET [failed - net::ERR_FAILED]
https://api.realworld.io/api/articles?limit=10&offset=0 GET [failed - net::ERR_FAILED]Bereitgestellt von

Stell Anschlussfragen, um tiefer zu gehen:

Are there any failed requests?Bereitgestellt von

Die KI filtert die Liste und benennt das Problem: „Ja, vier API-Requests sind fehlgeschlagen. Zwei lieferten 307-Redirects, zwei sind komplett mit ERR_FAILED gescheitert.“

So findest du Probleme schnell, ohne den Network-Tab manuell zu inspizieren.

JavaScript-Ausführung und Datenextraktion

Über das Anzeigen von Konsolen- und Netzwerkdaten hinaus kannst du Code direkt auf der Seite ausführen, um den Zustand zu prüfen oder Informationen zu extrahieren. Nutze dafür evaluate_script:

Check if any articles are displayed on the homepageBereitgestellt von

Die KI führt JavaScript aus, um die Artikel-Elemente zu zählen:

const articles = document.querySelectorAll('.article-preview');
return articles.length;Bereitgestellt von

Ergebnis: „Es werden 0 Artikel angezeigt. Die Seite zeigt ‚Loading articles…‘, was darauf hindeutet, dass die API-Fehler das Laden der Inhalte verhindern.“

Du kannst auch komplexere Daten extrahieren:

Get the page title and main heading textBereitgestellt von

Die KI evaluiert:

return {
 pageTitle: document.title,
 mainHeading: document.querySelector('h1')?.textContent
};Bereitgestellt von

Ergebnis: {pageTitle: "Home — Conduit", mainHeading: "conduit"}

So prüfst du Inhalte, extrahierst strukturierte Daten oder kontrollierst, ob dynamische Elemente korrekt geladen sind. Die Tools take_screenshot und take_snapshot ergänzen das, indem sie bei Bedarf visuelle und strukturelle Doku erstellen.

Diese drei Debugging-Fähigkeiten greifen natürlich ineinander. Starte mit Konsolenmeldungen, um Fehler zu erkennen, prüfe Netzwerk-Requests, um die Ursache zu verstehen, und nutze JavaScript-Evaluation, um zu verifizieren, wie sich die Fehler auf die Seite auswirken – alles im Dialog mit deinem KI-Assistenten, ohne Toolwechsel oder Inspektionsskripte.

Website-Frontends mit Chrome DevTools MCP bauen

KI-Assistenten können Weboberflächen bauen, aber sie sehen nicht, was sie erstellen. Du machst dann manuell Screenshots und bittest um Anpassungen.

Chrome DevTools MCP ändert das. Die KI macht eigene Screenshots, prüft Layouts und iteriert, bis alles sitzt.

Bauen wir einen ChatGPT-Klon mit Streamlit. Du brauchst dafür einen OpenAI-API-Schlüssel. Gib ihn deinem KI-Assistenten beim Ausführen des Prompts, damit er die App korrekt verifizieren kann. Hier der Prompt:

Build a ChatGPT clone using Streamlit. Create a clean chat interface
with message history, text input, and OpenAI API integration. Include
a sidebar for API key management and chat management features (Clear
Chat, New Chat, message counter). Use Chrome DevTools MCP to verify
the UI at each step.Bereitgestellt von

Die KI erstellt die App mit einer Sidebar und macht einen Screenshot, um das initiale Layout zu prüfen:

Die Sidebar enthält API-Key-Eingabe, Clear-Chat- und New-Chat-Buttons sowie einen Zähler auf 0. Mit dem Interface bereit prüfen wir die Chat-Funktion.

Test mit einer einfachen Frage:

Der Chat antwortet korrekt, und der Zähler steht (im nächsten Screenshot) auf zwei. Aber funktioniert auch mehrturnige Konversation?

Test des Gesprächskontexts:

Die KI erinnert sich an den vorherigen Austausch. Als Nächstes prüfen wir die Clear-Chat-Funktion.

Klick auf den Clear-Chat-Button:

Der Chat wird erfolgreich geleert, der Zähler steht auf 0.

Start einer neuen Unterhaltung:

Perfekt. Die KI hat einen funktionierenden ChatGPT-Klon gebaut, das Erscheinungsbild bei jedem Schritt verifiziert und alle Features ohne menschliches Eingreifen getestet.

Das funktioniert mit jedem Framework: React, Vue, Svelte, pures HTML. Die KI prüft Layouts, testet Interaktionen und findet Bugs, bevor du den Code siehst.

Fazit und nächste Schritte

Chrome DevTools MCP bringt Browserautomatisierung in den Dialog. Du beschreibst, was du brauchst, und dein KI-Assistent übernimmt die technischen Details. Keine Skripte, keine Selektoren-Debugging.

In diesem Artikel haben wir die Grundlagen abgedeckt: Server installieren, Seiten navigieren, Formulare ausfüllen, Elemente klicken und Screenshots erstellen. Anschließend ging es ums Debuggen mit Konsoleninspektion, Netzwerkmonitoring und JavaScript-Evaluation. Zum Schluss haben wir gesehen, wie diese Tools zusammenwirken, um Frontends zu bauen, bei denen die KI ihr eigenes Ergebnis sieht.

Was du als Nächstes ausprobieren solltest

Starte mit einer Seite, an der du arbeitest, und bitte deine KI, nach Konsolenfehlern zu suchen oder Netzwerk-Requests zu prüfen. Wenn du Claude Code nutzt, zeigt dir unser Guide zu Best Practices mit Claude Code wirkungsvolle Prompting-Muster für Tool-Nutzung. Mach Screenshots verschiedener Zustände. Teste Formular-Submits.

Kombiniere dann mehrere Tools: Navigiere zu einer Seite, fülle ein Formular aus, sende es ab und erfasse das Ergebnis. Prüfe Konsolenmeldungen, liste fehlgeschlagene Netzwerk-Requests auf und führe JavaScript aus, um den Seitenzustand zu verifizieren.

Wenn du dich mit den Basics wohlfühlst, erstelle mit deiner KI eine kleine UI-Komponente und lass sie bei jedem Schritt das Layout prüfen. Beobachte, wie sie visuelle Probleme erkennt, bevor du manuell kontrollierst.

Für Performance-Arbeit nutze die Performance-Tools (performance_start_trace, performance_stop_trace, performance_analyze_insight), um Ladezeiten zu profilieren und Engpässe zu finden. Verwende Emulation (emulate_cpu, emulate_network, resize_page), um unter verschiedenen Bedingungen zu testen.

Chrome DevTools MCP ist ein Server unter vielen. Kombiniere ihn mit Dateisystem-Servern, Datenbank-Tools oder API-Integrationen, um Workflows über mehrere Systeme hinweg zu bauen. Für mehr MCP-Beispiele siehe unser Codex CLI MCP Tutorial und das Google ADK MCP Tutorial.

Wenn du eigene MCP-Server bauen willst, schau dir Building an MCP Server and Client with FastMCP 2.0 an.