Chrome DevTools MCP - Browser-Steuerungstool für KI-Programmierassistenten

Projektübersicht

Chrome DevTools MCP ist ein offizieller Model Context Protocol (MCP)-Server, der es KI-Programmierassistenten (wie Gemini, Claude, Cursor oder Copilot) ermöglicht, einen live laufenden Chrome-Browser zu steuern und zu inspizieren. Dieses Tool bietet KI-Codierungsassistenten die volle Funktionalität der Chrome DevTools für zuverlässige Automatisierung, tiefgreifendes Debugging und Leistungsanalyse.

GitHub-Adresse: https://github.com/ChromeDevTools/chrome-devtools-mcp

Kernfunktionen

1. Leistungseinblicke

• Aufzeichnung von Leistungsverfolgungen mit Chrome DevTools
• Extraktion umsetzbarer Empfehlungen zur Leistungsoptimierung
• Unterstützung von KI-Assistenten bei der Identifizierung von Leistungsengpässen

2. Erweitertes Browser-Debugging

• Analyse von Netzwerkanfragen
• Erfassung von Screenshots
• Überprüfung der Browser-Konsolenausgabe
• Erkennung von CORS-Problemen und Konsolenfehlern

3. Zuverlässige Automatisierung

• Browser-Automatisierung basierend auf Puppeteer
• Automatisches Warten auf Operationsergebnisse
• Unterstützung von Formularausfüllung, Seitennavigation, Elementinteraktion

Hauptfunktionskategorien

Der Chrome DevTools MCP-Server bietet 26 Tools, die in die folgenden Kategorien unterteilt sind:

Eingabeautomatisierung (7 Tools)

• Klicken, Formulare ausfüllen, Text eingeben
• Hovern, Tastaturaktionen und andere Interaktionsfunktionen

Navigationsautomatisierung (7 Tools)

• Seitennavigation, Vor- und Zurückspringen
• Aktualisieren, Warten auf Ladeabschluss

Simulationsfunktionen (3 Tools)

• Gerätesimulation
• Geolokationssimulation
• Netzwerkbedingungssimulation

Leistungsanalyse (3 Tools)

• Aufzeichnung von Leistungsverfolgungen
• Analyse von Leistungskennzahlen
• Generierung von Optimierungsvorschlägen

Netzwerküberwachung (2 Tools)

• Liste der Netzwerkanfragen
• Anzeige von Anfragedetails

Debugging-Tools (4 Tools)

• Anzeige von Konsolennachrichten
• JavaScript-Ausführung
• Screenshot-Funktion
• DOM-Inspektion

Systemanforderungen

• Node.js: 20 oder neuere LTS-Version
• Chrome: Aktuelle stabile Version oder neuer
• npm: Paketmanager

Installation und Konfiguration

Allgemeine Konfiguration

Fügen Sie die folgenden Inhalte zu Ihrer MCP-Client-Konfigurationsdatei hinzu:

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

Unterstützte KI-Programmierassistenten

Claude Code

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

Cursor

Über die Cursor-Einstellungen: Settings -> MCP -> New MCP Server, verwenden Sie die obige Konfiguration

Gemini CLI

# Projektebene
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

# Globale Installation
gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

VS Code Copilot

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

Cline

Befolgen Sie die MCP-Konfigurationsanleitung von Cline für die Standardkonfiguration

Konfigurationsoptionen

Chrome DevTools MCP unterstützt die folgenden Konfigurationsparameter:

Parameter	Typ	Standardwert	Beschreibung
--headless	boolean	false	Ob im Headless-Modus ausgeführt werden soll (ohne UI)
--isolated	boolean	false	Erstellt ein temporäres Benutzerdatenverzeichnis, das nach dem Schließen automatisch bereinigt wird
--channel	string	stable	Chrome-Versionskanal (stable/canary/beta/dev)
--viewport	string	-	Anfängliche Viewport-Größe, z.B. 1280x720
--executablePath / -e	string	-	Benutzerdefinierter Pfad zur Chrome-Ausführungsdatei
--browserUrl / -u	string	-	Verbindung zu einer laufenden Chrome-Instanz herstellen
--proxyServer	string	-	Proxy-Server-Konfiguration
--acceptInsecureCerts	boolean	false	Ignoriert Fehler bei selbstsignierten und abgelaufenen Zertifikaten (mit Vorsicht verwenden)
--logFile	string	-	Pfad zur Debug-Protokolldatei

Konfigurationsbeispiel

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

Anwendungsbeispiele

Grundlegender Test

Geben Sie nach der Installation die folgende Aufforderung in Ihren KI-Assistenten ein, um einen Test durchzuführen:

Check the performance of https://developers.chrome.com

Der KI-Assistent wird automatisch:

1. Den Chrome-Browser öffnen
2. Zur angegebenen Website navigieren
3. Eine Leistungsverfolgung aufzeichnen
4. Analysieren und Empfehlungen zur Leistungsoptimierung geben

Häufige Anwendungsfälle

1. Leistungsanalyse

Analysiere die Ladeleistung von example.com und gib Optimierungsvorschläge

2. Debugging von Netzwerkproblemen

Überprüfe, ob my-website.com CORS-Fehler aufweist

3. Automatisierungstests

Navigiere zu demo.realworld.io, fülle das Anmeldeformular aus und mache einen Screenshot

4. Formularausfüllung

Fülle auf der Anmeldeseite die E-Mail test@example.com und das Passwort testpass123 aus

5. Konsoleninspektion

Zeige die Konsolenfehlermeldungen der aktuellen Seite an

Funktionsweise

Chrome DevTools MCP arbeitet basierend auf dem Model Context Protocol (MCP)-Standard:

1. MCP-Protokoll: Offener Standard zur Verbindung von großen Sprachmodellen mit externen Tools und Datenquellen
2. Werkzeugexposition: Exponiert Chrome DevTools-Funktionen als Tools über das MCP-Protokoll
3. KI-Aufruf: Der KI-Assistent ruft je nach Benutzeranforderung die entsprechenden Tools auf
4. Automatisierte Ausführung: Verwendet Puppeteer zur Ausführung von Operationen in Chrome
5. Ergebnisrückgabe: Gibt die Ausführungsergebnisse an den KI-Assistenten zurück

Beispielablauf

Wenn Sie den KI-Assistenten bitten, "die Website-Leistung zu überprüfen":

Benutzer: Überprüfe die Leistung meiner Website
  ↓
KI-Assistent: Verwendet das Tool performance_start_trace
  ↓
MCP-Server: Startet Chrome, öffnet die Website, zeichnet die Leistungsverfolgung auf
  ↓
KI-Assistent: Analysiert die Leistungsdaten
  ↓
Benutzer: Erhält Leistungsanalysebericht und Optimierungsvorschläge

Datenverzeichnis

Chrome DevTools MCP verwendet die folgenden Benutzerdatenverzeichnisse:

• Linux / MacOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
• Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

Das Datenverzeichnis wird zwischen den Ausführungen nicht gelöscht, es sei denn, die Option --isolated wird verwendet.

Sicherheitshinweise

⚠️ Wichtiger Hinweis:

Chrome DevTools MCP macht den Inhalt der Browserinstanz für MCP-Clients zugänglich, wodurch diese beliebige Daten im Browser oder in den DevTools inspizieren, debuggen und ändern können.

Bitte vermeiden Sie es, sensible oder persönliche Informationen zu teilen, die Sie nicht mit MCP-Clients teilen möchten.

Fehlerbehebung

Wenn Probleme auftreten, lesen Sie bitte die offizielle Fehlerbehebungsanleitung.

Häufige Probleme

1. Browser startet nicht automatisch: Der MCP-Server startet den Browser nur, wenn der Client ein Tool verwendet, das einen Browser benötigt
2. Sandbox-Berechtigungsprobleme: Wenn der MCP-Client Sandbox aktiviert hat, muss diese möglicherweise deaktiviert oder --connect-url verwendet werden, um eine Verbindung zu einer manuell gestarteten Chrome-Instanz herzustellen
3. Start-Timeout: Unter Windows muss möglicherweise die Konfiguration startup_timeout_ms erhöht werden

Technologiestack

• Kern: Node.js
• Browser-Automatisierung: Puppeteer
• Protokoll: Chrome DevTools Protocol (CDP)
• Standard: Model Context Protocol (MCP)

Projektmerkmale

1. Offizieller Support: Offiziell vom Chrome DevTools-Team entwickelt und gewartet
2. Breite Kompatibilität: Unterstützt eine Vielzahl gängiger KI-Programmierassistenten
3. Umfassende Funktionalität: Bietet 26 Tools für Automatisierung, Debugging und Leistungsanalyse
4. Einfache Integration: Keine lokale Installation erforderlich mit npx, einfache Konfiguration
5. Aktive Entwicklung: Kontinuierliche Aktualisierung und Verbesserung der Funktionen

Anwendungsbereiche

• Webentwicklungs-Debugging: KI-Assistenten helfen bei der Identifizierung und Behebung von Fehlern
• Leistungsoptimierung: Automatisierte Leistungsanalyse und Optimierungsvorschläge
• Automatisierungstests: Schreiben und Ausführen von Browser-Automatisierungstests
• Website-Überwachung: Überprüfung der Website-Funktionalität und -Leistung
• Entwicklungsvalidierung: Überprüfung der tatsächlichen Auswirkungen von Codeänderungen im Browser

Feedback und Beiträge

Dieses Projekt befindet sich in der öffentlichen Vorschau, und das Chrome DevTools-Team sucht aktiv nach Community-Feedback:

• Wenn Sie Funktionsanfragen haben oder Probleme finden, reichen Sie diese bitte unter GitHub Issues ein
• Ob Sie Entwickler sind, der KI-Programmierassistenten verwendet, oder Anbieter, der KI-Entwicklungstools der nächsten Generation entwickelt, Ihre Erkenntnisse sind von unschätzbarem Wert