Google hat kürzlich die Beta-Version des „Chrome DevTools MCP“ veröffentlicht. Es handelt sich dabei um einen Modell-Kontext-Protokoll (MCP)-Server, der es KI-Codierungs-Agenten ermöglicht, echte Chrome-Browser-Instanzen zu steuern und zu überwachen. Das Werkzeug kann Leistungsdaten aufzeichnen, DOM und CSS überprüfen, JavaScript ausführen, Konsolenausgaben lesen und Benutzerprozesse automatisieren.
Diese Veröffentlichung zielt direkt auf eine allgemeine Einschränkung von Code-Erzeugungs-Agenten ab: Sie können oft nicht beobachten, wie sich die ausgewählten oder geänderten Seiten im Laufe der Zeit verhalten. Durch die Verbindung des Agenten mit den DevTools von Chrome verwandelt Google seinen statischen Vorschlags-Engine in einen geschlossenen Debugger, der Messungen im Browser durchführen und Reparaturvorschläge unterbreiten kann.
Was ist eigentlich Chrome DevTools MCP?
MCP ist ein offenes Protokoll, das große Sprachmodelle (LLM) mit Tools und Daten verbindet. Google’s DevTools MCP ist ein spezieller Server, der die Debug-Schnittstelle von Chrome für kompatible MCP-Clients öffnet. Der Google Developer Blog beschreibt es als „die Kraft der Chrome DevTools für AI-Codier-Helfer“, und bietet konkrete Workflows wie das Starten einer Leistungsverfolgung (z.B. performance_start_trace) und das Analyse der Ergebnisse durch den Agenten, um Optimierungsvorschläge (z.B. Diagnose eines hohen Maximal Content Paint) zu machen.
Funktionen und Tools
Das offizielle GitHub-Repository listet eine breite Palette an Tools auf. Neben der Leistungsverfolgung können Agenten auch Navigationsprimitive ausführen (z.B. navigate_page, new_page, wait_for), Benutzer-Eingaben simulieren (z.B. click, fill, drag, hover) und den laufenden Zustand überprüfen (z.B. list_console_messages, evaluate_script, list_network_requests, get_network_request). Bildschirmfotos und Snapshots bieten visuelle und DOM-Zustandsaufzeichnungen und unterstützen Differenzvergleiche und Regressionstests. Der Server nutzt Puppeteer auf der unteren Ebene, um zuverlässige Automatisierung und Warte-Semantik sicherzustellen, und kommuniziert mit Chrome über das Chrome DevTools-Protokoll (CDP).
Installationsprozess
Die Einrichtung des MCP-Clients ist sehr einfach. Google empfiehlt, einfach nur eine Konfigurationsabschnitt hinzuzufügen und den neuesten Server-Build mit npx zu verfolgen:
json
{
"mcpServers": {
"chrome-devtools": {
"command": "npx"，
"args": ["chrome-devtools-mcp@latest"]
}
}
}
Dieser Server ist mit mehreren Agenten-frontend integriert: z.B. Gemini CLI, Claude Code, Cursor sowie MCP-Unterstützung für GitHub Copilot. Für VS Code/Copilot bietet das Repository einen Befehl in einer Zeile: code --add-mcp; für Claude Code erfolgt dies mit dem Befehl claude mcp add. Das Paket zielt auf Node.js ≥22 und die aktuelle Version von Chrome.
Beispiel-Agenten-Workflows
Der Google-Announcement betont praktische Tipps, die die End-to-End-Schleife zeigen: Überprüfung von reparierten Vorschlägen in einem realen Browser, Analyse von Netzwerk-Problemen (z.B. CORS oder blockierte Bildanfragen), Simulation von Benutzeraktionen wie Formular-Übermittlung, um Fehler zu reproduzieren, Kontrolle von Layout-Problemen durch Lesen von DOM/CSS-Kontext und Ausführung von automatisierten Leistungsüberprüfungen, um maximalen Inhaltspaint zu reduzieren. All dies sind Aktionen, die Agenten nun durch tatsächliche Messungen statt durch Heuristiken durchführen können.
github: https://github.com/ChromeDevTools/chrome-devtools-mcp
Wichtige Punkte:
🌟 ** Echtzeit-Steuerelemente **: Google's Chrome DevTools MCP ermöglicht es KI-Agenten, echte Chrome-Browser zu steuern und zu überwachen.
⚙️ ** Umfangreiche Funktionen **: Unterstützung von Leistungsverfolgung, Simulation von Benutzer-Eingaben und Prüfung des laufenden Zustands.
🚀 ** Einfache Installation **: Der Benutzer muss nur eine einfache Konfiguration vornehmen, um den MCP-Server schnell bereitzustellen und in verschiedene Entwicklertools zu integrieren.
