Chrome DevTools für AI-Agenten (MCP)

• Mit der Veröffentlichung der Public-Preview-Version des Chrome DevTools MCP-Servers können AI-Coding-Agenten nun die Debugging- und Performance-Funktionen von Chrome DevTools verwenden
• Bisher konnten Agenten die Ausführungsergebnisse von Code nicht prüfen, jetzt können sie jedoch echte Laufzeitdaten wie Netzwerk, Konsole, DOM und Performance-Tracing nutzen
• Mit dem DevTools MCP-Server sind verschiedene Automatisierungen möglich, darunter Code-Validierung in Echtzeit, Analyse von Netzwerk- und Konsolenfehlern, Simulation von Benutzeraktionen, Debugging von Stil- und Layoutproblemen sowie automatisierte Performance-Audits
• Entwickler können den Server direkt nutzen, indem sie ihn zur MCP-Client-Konfiguration hinzufügen, und mit Beispiel-Prompts etwa LCP prüfen oder Fehler bei Formularübermittlungen diagnostizieren
• Google plant, die MCP-Funktionen auf Basis von Community-Feedback zu erweitern

---

Überblick

• Google hat eine Public Preview des neuen Chrome DevTools Model Context Protocol (MCP) Servers veröffentlicht
• Dadurch wird eine Umgebung geschaffen, in der AI-Coding-Assistenten die Debugging- und Performance-Messfunktionen von Chrome DevTools direkt im Browser nutzen können
• Damit lässt sich ein zentrales Problem lösen: Coding-Agenten konnten bisher das tatsächliche Verhalten von Code, der im Browser läuft, nicht verifizieren

Einführung in das Model Context Protocol (MCP)

• Das Model Context Protocol (MCP) ist ein Open-Source-Standard, um Large Language Models (LLMs) mit externen Tools und Datenquellen zu verbinden
• Der Chrome DevTools MCP-Server nutzt diesen Standard, um sich mit AI-Agenten zu integrieren und verschiedene Werkzeuge für Web-Debugging und Performance-Tracing bereitzustellen
• Zum Beispiel kann das LLM mit dem Tool performance_start_trace den Browser starten, Performance-Informationen sammeln, analysieren und Verbesserungsvorschläge machen
• Über das MCP-Protokoll erhalten Coding-Agenten deutlich stärkere Unterstützung bei der Entwicklung von Websites und der Problemlösung
• Wie MCP im Detail funktioniert, ist in der offiziellen MCP-Dokumentation nachzulesen

Wichtige Anwendungsfälle

• Validierung von Codeänderungen in Echtzeit

  • Nachdem ein AI-Agent Code geändert hat, kann er mit Chrome DevTools MCP das Verhalten im Browser sofort überprüfen
  • Beispiel-Prompt:

    Verify in the browser that your change works as expected.  
    

• Diagnose von Netzwerk- und Konsolenfehlern

  • Unterstützt automatische Diagnose wie die Analyse von Netzwerkanfragen, das Erkennen von CORS-Problemen und das Prüfen von Konsolen-Logs
  • Beispiel-Prompt:

    A few images on localhost:8080 are not loading. What's happening?  
    

• Simulation von Benutzerverhalten

  • Hilft bei automatisierten Tests realer Nutzungsabläufe im Browser wie Navigation, Formularausfüllen und Button-Klicks sowie bei der Reproduktion von Bugs
  • Beispiel-Prompt:

    Why does submitting the form fail after entering an email address?  
    

• Debugging von Stil- und Layoutproblemen in Echtzeit

  • Bietet automatisch detaillierte Vorschläge für DOM- und CSS-Inspektion sowie für Layoutprobleme wie Overflow
  • Beispiel-Prompt:

    The page on localhost:8080 looks strange and off. Check what's happening there.  
    

• Automatisierung von Performance-Audits

  • Automatisiert Performance-Tracing im Browser und dessen Analyse
  • Beispiel-Prompt:

    Localhost:8080 is loading slowly. Make it load faster.  
    

• Eine Liste verfügbarer MCP-Tools ist in der offiziellen Tool-Referenz zu finden

Erste Schritte

• Durch Hinzufügen der folgenden Konfiguration zum MCP-Client lässt sich der Chrome DevTools MCP-Server integrieren

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

• Mit einem Beispiel-Prompt lässt sich die Funktion prüfen

  Please check the LCP of web.dev.  
  

• Ausführliche Informationen und Dokumentation gibt es in der Chrome DevTools MCP-Dokumentation auf GitHub

Beteiligung und Ausbaupläne

• Google will Chrome DevTools MCP ausgehend von dieser Public Preview schrittweise weiterentwickeln
• Künftige zusätzliche Funktionen sollen auf Basis von Community-Feedback festgelegt werden
• Rückmeldungen und Beteiligung von Nutzern von AI-Coding-Tools ebenso wie von Anbietern der nächsten Generation von AI-Entwicklungstools sind ausdrücklich willkommen
• Verbesserungswünsche oder entdeckte Probleme können über GitHub Issues gemeldet werden

[shakespeares]

Ich frage mich, ob es Anwendungsfälle gibt, in denen es bessere Aspekte als Playwright hat.
Auf den ersten Blick wirkt es ehrlich gesagt etwas enttäuschend.