Chrome DevTools MCP: Steuerung und Erkennung des Chrome-Browsers durch KI-Intelligenz

Chrome DevTools MCP ist ein Open-Source-Tool, das als Server fungiert und es KI-Programmierassistenten (wie Gemini, Claude oder Copilot) ermöglicht, einen laufenden Google Chrome-Browser direkt zu steuern und zu überprüfen. Dieses Tool löst ein Kernproblem von KI-Programmierassistenten: Sie können zwar Code schreiben, aber sie können nicht sehen, wie der Code tatsächlich im Browser läuft, als ob sie mit verbundenen Augen programmieren würden. Durch die Verwendung des Model-Context-Protokolls (MCP) verbindet das Tool KI-Assistenten mit den leistungsstarken Chrome-Entwickler-Tools und ermöglicht es der KI, automatisierte Operationen, tiefgreifendes Debugging und Leistungsanalysen durchzuführen. Das bedeutet, dass die KI nicht nur Code generieren, sondern ihn auch in realen Umgebungen testen, prüfen und korrigieren kann und dabei Änderungen vorschlägt, die auf tatsächlichen Browserdaten und nicht nur auf Vermutungen basieren. Die Entwickler können dies mit einem einfachennpxum ihn auszuführen und als unterstützten AI-Client zu konfigurieren.

Funktionsliste

• LeistungsanalyseChrome Developer Tools: Mit den Chrome Developer Tools können Sie den Leistungsverlauf von Webseiten aufzeichnen und wertvolle Erkenntnisse für Verbesserungen gewinnen.
• Browser-FehlersucheAnalyse von Webanfragen, Auslesen von Browserkonsoleninformationen, Ausführen von JavaScript-Skripten und Erstellen von Screenshots von Webseiten.
• Zuverlässige AutomatisierungPuppeteer: Basiert auf der Puppeteer-Bibliothek, um die Steuerung des Chrome-Browsers zu automatisieren, wie z. B. die Simulation von Benutzerklicks, das Ausfüllen von Formularen und die Seitennavigation sowie das automatische Warten auf den Abschluss von Aktionen.
• Simulation der AusrüstungUnterstützt die Simulation verschiedener CPU-Leistungen und Netzwerkbedingungen, um das Testen der Webseitenleistung in verschiedenen Umgebungen zu erleichtern.
• Multi-Client-UnterstützungKann mit einer Vielzahl von KI-Programmierassistenten wie Claude, Cursor, Copilot in VS Code und Gemini integriert werden.

Hilfe verwenden

Chrome DevTools MCP fungiert als Model-Context-Protocol (MCP)-Server, der KI-Programmierassistenten die Möglichkeit bietet, den Chrome-Browser zu steuern. Nachfolgend finden Sie eine detaillierte Anleitung zur Installation und Verwendung des Tools.

Anforderungen an die Umwelt

Bevor Sie beginnen, vergewissern Sie sich, dass Ihr System die folgenden Bedingungen erfüllt:

• Node.js 22 oder höher.
• Chrome Stable oder neuere Version.
• npm-Paketmanager.

Installation und Inbetriebnahme

Die einfachste Art der Installation und Ausführung ist über dienpxruft dieser Befehl das neueste Paket ab und führt es aus. Sie müssen dem MCP-aktivierten AI-Client die folgende Konfiguration hinzufügen:

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

ausnutzenchrome-devtools-mcp@latestEs kann sichergestellt werden, dass Ihr KI-Client immer die neueste Version des Dienstes verwendet.

Konfiguration für verschiedene AI-Clients

1. Claude Code
   Fügen Sie den MCP-Server mit dem Befehlszeilentool von Claude Code hinzu:

   claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
   

2. Kopilot / VS-Code
   Folgen Sie der MCP-Installationsanleitung, um die oben genannte Standardkonfiguration in VS Code hinzuzufügen. Sie können auch das Befehlszeilentool von VS Code verwenden, um es zu installieren:

   code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'
   

3. Cursor
   • Schnelle InstallationKlicken Sie auf die Schaltfläche "In Cursor installieren" in der Cursor-Software, um sie zu installieren.
   • manuelle Installation:
     1. Geben Sie den Cursor Settings -> MCP.
     2. Streik (auf der Tastatur) New MCP Server.
     3. Fügen Sie die oben angegebene Standard-JSON-Konfiguration ein.
4. Gemini CLI oder Gemini Code Assist
   Folgen Sie der offiziellen MCP-Konfigurationsanleitung und verwenden Sie die oben angegebene Standard-JSON-Konfiguration.

Kernfunktion Betrieb

Sobald der Server konfiguriert ist, kann Ihr KI-Programmierassistent eine Reihe von Tools zur Bedienung des Browsers aufrufen. Bei diesen Tools handelt es sich um vordefinierte Befehle, die die KI auf der Grundlage Ihrer natürlichsprachlichen Anweisungen auswählt und ausführt.

• Navigation und Bedienung der Seite
  Sie können die KI anweisen, "eine neue Seite zu öffnen und eine bestimmte URL zu besuchen", und die KI wird dienew_pageim Gesang antwortennavigate_pageWerkzeug. Sie können auch "alle geöffneten Tabs auflisten" lassen (list_pages) oder "Aktuelle Seite schließen" (close_page).
• Analoge Benutzereingabe
  Sie können die KI anweisen, "auf eine Schaltfläche auf der Seite zu klicken" (click) oder "Ein Eingabefeld mit Text ausfüllen" (fill). Diese Vorgänge beruhen auf der Puppeteer-Implementierung, die das reale Benutzerverhalten zuverlässig simuliert.
• Leistungsanalyse
  Dies ist eine Kernfunktion. Sie können die KI bitten, "die Ladeleistung der aktuellen Seite zu analysieren", und die KI wird der Reihe nach Folgendes tun:
  1. Aufforderungen performance_start_trace Das Tool beginnt mit der Aufzeichnung von Leistungsverläufen.
  2. Aktualisiert die Seite oder führt die angegebene Aktion aus.
  3. Aufforderungen performance_stop_trace Schließen Sie das Protokoll.
  4. Aufforderungen performance_analyze_insight Analysieren Sie die gesammelten Daten und informieren Sie in natürlicher Sprache über Leistungsengpässe und Optimierungsempfehlungen.
• Komponenten während der Prüfung anpassen
  Wenn Sie auf einen Programmfehler stoßen, können Sie die KI auffordern, "die Browserkonsole auf Fehlermeldungen zu überprüfen", und die KI wird dielist_console_messagesWerkzeug, um Protokolle zu erhalten. Sie können es auch "ein Skript ausführen lassen, um Daten zu erhalten" (evaluate_script) oder "Bild der aktuellen Seite einfangen" (take_screenshot) für die Analyse.

Erweiterte Konfiguration

Weitere Informationen hierzu finden Sie in derargsFügen Sie dem Array Befehlszeilenargumente hinzu, um das Verhalten des Servers weiter anzupassen. Führen Sie ihn beispielsweise im Headless-Modus (es wird keine Browserschnittstelle angezeigt) und in einer temporären Standalone-Konfiguration aus:

{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--headless=true",
"--isolated=true"
]
}
}
}

Im Folgenden finden Sie einige gängige Konfigurationsparameter:

• --headlessChrome im UI-losen Modus ausführen.
• --isolatedErzeugt bei jedem Start ein temporäres Benutzerdatenverzeichnis, das beim Schließen des Browsers automatisch gelöscht wird.
• --channel: Geben Sie den zu verwendenden Chrome-Versionskanal an, z. B.canaryundbetavielleichtdev.
• --browserUrlVerbinden Sie sich mit einer Chrome-Instanz, die bereits läuft, über Portweiterleitung.

Um alle verfügbaren Konfigurationsoptionen zu sehen, können Sie in einem Terminal Folgendes ausführen npx chrome-devtools-mcp@latest --help.

Anwendungsszenario

1. Automatisierte Front-End-Leistungsanalyse
   KI-Intelligenzen können automatisch eine bestimmte Webseite öffnen, einen Performance-Trace starten, eine Reihe von Benutzeraktionen durchführen, dann den Trace stoppen und die Ergebnisse analysieren und schließlich Performance-Berichte und Optimierungsempfehlungen in für Menschen lesbarer Sprache erstellen.
2. Automatisiertes Debugging von Webanwendungen
   Wenn Anomalien in der Website-Funktionalität festgestellt werden, können Entwickler die KI-Intelligenzen anweisen, den Vorgang zu reproduzieren und das Konsolen-Fehlerprotokoll zu überprüfen, Fehler bei Netzwerkanfragen anzuzeigen oder spezifischen JavaScript-Code auszuführen, um die Ursache des Problems zu diagnostizieren.
3. Regressionstests und UI-Validierung
   KI-Intelligenzen können UI-Regressionstests automatisieren, indem sie automatisch auf Webseiten zugreifen, Formulare ausfüllen und Schaltflächen nach einem vorgegebenen Prozess anklicken und durch den Vergleich von Screenshots überprüfen, ob die Schnittstelle den Erwartungen entspricht.
4. Webdatenerfassung und -verarbeitung
   Durch die programmatische Steuerung des Browsers können die KI-Intelligenzen zur Zielseite navigieren, Informationen aus dem DOM extrahieren, die Daten verarbeiten und die Ergebnisse an den Benutzer zurückgeben, um einfache Daten-Crawling-Aufgaben durchzuführen.

QA

1. Was ist MCP?
   MCP steht für Model Context Protocol. Es ist ein offener Standard für die Verbindung großer Sprachmodelle (LLMs) wie Gemini oder Claude mit externen Tools und Diensten. Chrome DevTools MCP ist ein Server, der dieses Protokoll implementiert und als "Adapter" zwischen AI und Chrome Developer Tools fungiert.
2. Ist dieses Tool sicher? Worauf muss ich achten?
   Das Tool legt den Inhalt der Browserinstanz für den KI-Client offen, so dass die KI alle Daten im Browser prüfen, debuggen oder sogar ändern kann. Daher sollten Sie es vermeiden, Webseiten zu öffnen oder zu manipulieren, die sensible oder persönliche Informationen enthalten, um zu verhindern, dass Informationen an den KI-Client weitergegeben werden.
3. Warum schlägt die Inbetriebnahme bei manchen Kunden fehl?
   Einige AI-Clients (z. B. solche, die macOS Seatbelt oder Linux-Container unterstützen) führen den MCP-Server in einer Sandbox-Umgebung aus. Da Chrome beim Starten seine eigene Sandbox erstellen muss, kann dies zu Berechtigungskonflikten und Startfehlern führen. Die Abhilfe besteht darin, die Sandboxing-Einschränkungen für Chrome DevTools MCP im AI-Client zu deaktivieren oder eine Chrome-Instanz manuell extern zu starten und die--browserUrlfür den Server, um eine Verbindung zu ihm herzustellen.