Veröffentlicht am 23. September 2025
Heute starten wir eine öffentliche Vorabversion des neuen Chrome-Entwicklertools-MCP-Servers (Model Context Protocol) server, mit dem die Leistungsfähigkeit der Chrome-Entwicklertools in KI-basierten Programmierassistenten genutzt werden kann.
Programmieragenten 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-Entwicklertools-MCP-Server ändert das. KI-basierte Programmierassistenten können Webseiten direkt in Chrome debuggen und die Debugging-Funktionen und Leistungseinblicke der Entwicklertools nutzen. Dadurch können sie Probleme genauer identifizieren und beheben.
Sehen Sie selbst, wie es funktioniert:
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 Daten Quellen. Der Chrome-Entwicklertools-MCP-Server fügt Ihrem KI-Agenten Debugging-Funktionen hinzu.
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-Entwicklertools eine Leistungsanalyse aufzeichnen. Anschließend kann das LLM die Leistungsanalyse analysieren und potenzielle Verbesserungen vorschlagen. Mit dem MCP-Protokoll kann der Chrome-Entwicklertools-MCP-Server Ihrem Programmieragenten neue Debugging-Funktionen zur Verfügung stellen, damit er bessere Websites erstellen kann.
Weitere Informationen zur Funktionsweise von MCP finden Sie in der MCP Dokumentation.
Verwendungszweck
Hier sind einige Beispiel-Prompts, die Sie im KI-Assistenten Ihrer Wahl wie der Gemini CLI ausprobieren können.
Codeänderungen in Echtzeit überprüfen
Generieren Sie mit Ihrem KI-Agenten eine Korrektur und lassen Sie dann automatisch mit dem Chrome-Entwicklertools-MCP überprüfen, ob die Lösung wie gewünscht 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
Navigieren Sie, füllen Sie Formulare aus und klicken Sie auf Schaltflächen, um Fehler zu reproduzieren und komplexe Nutzerabläufe zu testen. Dabei können Sie die Laufzeitumgebung prüfen.
Prompt zum Ausprobieren:
Why does submitting the form fail after entering an email address?
Probleme mit Live-Styling und -Layout debuggen
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.
Leistungsanalysen automatisieren
Weisen Sie Ihren KI-Agenten an, eine Leistungsanalyse 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-Referenz dokumentation.
Jetzt starten
Fügen Sie Ihrem MCP-Client den folgenden Konfigurationseintrag hinzu, um diese Funktion auszuprobieren:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
Führen Sie den folgenden Prompt in Ihrem Programmieragenten aus, um zu prüfen, ob er funktioniert:
Please check the LCP of web.dev.
Weitere Informationen finden Sie in der Chrome-Entwicklertools-MCP Dokumentation auf GitHub.
Mitmachen
Wir entwickeln Chrome-Entwicklertools-MCP schrittweise. Wir beginnen mit der öffentlichen Vorabversion, die wir heute veröffentlichen. Wir freuen uns über Ihr Feedback und das Feedback der Community dazu, welche Funktionen wir als Nächstes hinzufügen sollen. Ob Sie Entwickler sind, der KI-basierte Programmierassistenten 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, melden Sie bitte ein Problem auf GitHub.