Veröffentlicht: 23. September 2025
Wir starten heute eine öffentliche Vorabversion des neuen Chrome DevTools Model Context Protocol (MCP)-Servers, mit dem die Leistungsfähigkeit der Chrome-Entwicklertools auf KI-basierte Coding-Assistenten übertragen wird.
Coding-Agents stehen vor einem grundlegenden Problem: Sie können nicht sehen, was der von ihnen generierte Code tatsächlich tut, wenn er im Browser ausgeführt wird. Sie programmieren quasi mit verbundenen Augen.
Der Chrome DevTools-MCP-Server ändert dies. KI-Codierungsassistenten können Webseiten direkt in Chrome debuggen und die Debugging-Funktionen und Leistungsinformationen der Entwicklertools nutzen. Dadurch können sie Probleme genauer erkennen und beheben.
So funktioniert es:
Was ist das Model Context Protocol (MCP)?
Das Model Context Protocol (MCP) ist ein Open-Source-Standard zum Verbinden von Large Language Models (LLMs) mit externen Tools und Datenquellen. Der Chrome DevTools-MCP-Server bietet Debugging-Funktionen für Ihren KI-Agenten.
Der Chrome-Entwicklertools-MCP-Server bietet beispielsweise ein Tool namens performance_start_trace. Wenn ein LLM die Leistung Ihrer Website untersuchen soll, kann es mit diesem Tool Chrome starten, Ihre Website öffnen und mit den Chrome DevTools einen Leistungs-Trace aufzeichnen. Das LLM kann dann den Leistungs-Trace analysieren und potenzielle Verbesserungen vorschlagen. Mithilfe des MCP-Protokolls kann der Chrome DevTools-MCP-Server Ihrem Coding-Agent neue Debugging-Funktionen zur Verfügung stellen, damit er Websites besser erstellen kann.
Weitere Informationen zur Funktionsweise von MCP finden Sie in der MCP-Dokumentation.
Wofür kann ich es verwenden?
Im Folgenden finden Sie einige Beispielprompts, die Sie im KI-Assistenten Ihrer Wahl, z. B. in der Gemini CLI, ausprobieren können.
Codeänderungen in Echtzeit überprüfen
Lassen Sie Ihren KI-Agenten eine Lösung generieren und überprüfen Sie dann automatisch mit Chrome DevTools MCP, ob die Lösung wie vorgesehen funktioniert.
Prompt zum Ausprobieren:
Verify in the browser that your change works as expected.
Netzwerk- und Konsolenfehler diagnostizieren
Ihr Agent kann Netzwerkanfragen analysieren, um CORS-Probleme zu erkennen, oder Konsolenlogs prüfen, um herauszufinden, warum eine Funktion nicht wie erwartet funktioniert.
Prompt zum Ausprobieren:
A few images on localhost:8080 are not loading. What's happening?
Nutzerverhalten simulieren
Sie können navigieren, Formulare ausfüllen und auf Schaltflächen klicken, um Fehler zu reproduzieren und komplexe Nutzerabläufe zu testen – und das alles, während Sie die Laufzeitumgebung untersuchen.
Prompt zum Ausprobieren:
Why does submitting the form fail after entering an email address?
Probleme mit dem Live-Styling und ‑Layout beheben
Bitten Sie Ihren KI-Agenten, eine Verbindung zu einer Live-Seite herzustellen, das DOM und CSS zu prüfen und konkrete Vorschläge zur Behebung komplexer Layoutprobleme wie überlaufender Elemente zu erhalten, die auf Live-Daten aus dem Browser basieren.
Prompt zum Ausprobieren:
The page on localhost:8080 looks strange and off. Check what's happening there.
Leistungsprüfungen automatisieren
Weisen Sie Ihren KI-Agent an, einen Leistungstrace auszuführen, die Ergebnisse zu analysieren und bestimmte Leistungsprobleme wie hohe LCP-Werte zu untersuchen.
Prompt zum Ausprobieren:
Localhost:8080 is loading slowly. Make it load faster.
Eine Liste aller verfügbaren Tools finden Sie in der Tool-Referenzdokumentation.
Jetzt starten
Fügen Sie dazu Ihrem MCP-Client den folgenden Konfigurationseintrag hinzu:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
Führen Sie den folgenden Prompt in Ihrem Coding-Agent aus, um zu prüfen, ob er funktioniert:
Please check the LCP of web.dev.
Weitere Informationen finden Sie in der Dokumentation zum Chrome DevTools MCP auf GitHub.
Mitmachen
Wir entwickeln das MCP für Chrome-Entwicklertools schrittweise. Heute veröffentlichen wir die öffentliche Vorabversion. Wir freuen uns über Feedback von Ihnen und der Community dazu, welche Funktionen wir als Nächstes hinzufügen sollten. Ganz gleich, ob Sie ein Entwickler sind, der KI-Coding-Assistenten verwendet, oder ein Anbieter, der die nächste Generation von KI-Entwicklungstools entwickelt – Ihre Erkenntnisse sind von unschätzbarem Wert. Wenn etwas fehlt oder nicht funktioniert, erstellen Sie bitte ein Problem auf GitHub.