Chrome DevTools MCP Server mit Claude Code verbinden
Von: Jonas Mit dem Chrome DevTools MCP Server erweitert ihr Claude Code um Browser-Debugging-Fähigkeiten. Die KI kann dann eigenständig Websites analysieren, Performance-Metriken auslesen und Fehler im laufenden Browser identifizieren.
Claude Code ist stark in der Codegenerierung, aber ohne Zugriff auf einen echten Browser fehlt der Blick auf das Laufzeitverhalten. Der Chrome DevTools MCP Server schließt diese Lücke: Er verbindet Claude Code mit den Chrome DevTools und ermöglicht so automatisierte Performance-Analysen, das Aufspüren von Konsolenfehlern oder die Überprüfung von Netzwerk-Requests.
Was bringt die Integration?
Claude Code kann mit der MCP-Integration selbstständig eine Chrome-Instanz starten, zu URLs navigieren, diese testen (z. B. mit Lighthouse) und detaillierte Berichte liefern. Praktisch bedeutet das: Ihr fragt Claude nach der Performance einer Website und bekommt Sekunden später eine Auswertung mit Metriken wie First Contentful Paint (FCP) oder Largest Contentful Paint (LCP) – inklusive konkreter Optimierungsvorschläge. Da Claude Code im Idealfall so konfiguriert ist, dass der KI-Agent die Code-Basis eures Projekts kennt (z.B. das Repository inkl. Versionierung), können Fehler automatisiert im Browser analysiert und anschließend selbstständig im Code geändert werden. Der »Plan-Mode« von Claude ist hier sehr zu empfehlen.
Installation
Die Einrichtung erfolgt über die CLI von Claude Code. Öffnet ein Terminal in eurem Projektordner und startet Claude Code:
claude
Anschließend installiert ihr den MCP Server. Der folgende Befehl lädt die aktuelle Version und registriert den Server in der Claude-Konfiguration.
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
Verbindung überprüfen
Nach einem Neustart von Claude Code könnt ihr mit /mcp prüfen, ob der Server verbunden ist.
/mcp
In der Liste sollte chrome-devtools mit dem Status »Verbunden« erscheinen. Falls nicht, wählt ihr bei der MCP-Eingabeaufforderung »Neu verbinden« – Claude übernimmt den Rest.
Beispiel-Prompt: Performance-Analyse
Wenn der Chrome MCP läuft, gebt in Claude Code einen Prompt wie diesen ein:
Überprüfe die Performance von https://kulturbanause.de mit dem Chrome DevTools MCP Server.
Claude startet daraufhin eine Chrome-Instanz im Remote-Debugging-Modus, navigiert zur URL und führt eine Performance-Messung durch. Das Ergebnis ist ein Bericht mit Ladezeiten, Ressourcen-Wasserfällen und konkreten Hinweisen – etwa »Nicht-kritisches JavaScript verzögert laden, um LCP zu verbessern.«
Zusammenfassung
Die Kombination aus Claude Code und Chrome DevTools MCP Server macht Browser-Debugging deutlich effizienter. Statt manuell zwischen Terminal und DevTools zu wechseln, Lighthouse-Test manuell anzustoßen und auf die Ergebnisse zu warten, liefert euch die KI automatisierte Analysen mit nachvollziehbaren Empfehlungen und behebt diese auf Wunsch automatisch in der verbundenen Code-Basis.
