KI-Programmier-Workflow mit Chrome-Entwicklertools für Agents 1.0 optimieren

Veröffentlicht am 19. Mai 2026

KI-Codierungstools sind unglaublich leistungsstark beim Schreiben von Code, aber sie sind oft von der Ausführung getrennt. Sie können eine komplexe Webanwendung generieren, aber sie können ihr Verhalten nicht beobachten oder ihre Ausgabe in einem Live-Browser prüfen.

Chrome-Entwicklertools für Agents bietet Ihrem Codierungs-Agenten die Sichtbarkeit, die er zum Überprüfen, Debuggen und Optimieren von Code in Echtzeit benötigt. Vor einigen Monaten haben wir das Tool zum ersten Mal vorgestellt. Jetzt freuen wir uns, Ihnen mitteilen zu können, dass Chrome-Entwicklertools für Agents als stabile Version 1.0 verfügbar ist.

Agent mit dem Browser verbinden

Mit Chrome-Entwicklertools für Agents kann Ihr Agent Ihre Website so nutzen, wie es ein echter Nutzer tun würde. Diese stabile Version bietet Ihnen und Ihrem Agent mehrere Möglichkeiten, mit Chrome zu interagieren:

  • MCP-Server (Model Context Protocol): Ein Server, der große Sprachmodelle (Large Language Models, LLMs) mit den Debugging-Funktionen der Entwicklertools verbindet.
  • Befehlszeile: Eine tokeneffiziente Alternative, mit der Agents Aktionen in Skripten zusammenfassen können.
  • Agent-Fähigkeiten: Expertenanweisungen, die Ihrem Agent beibringen, wie und wann er bestimmte Tools für Aufgaben wie das Debuggen von Barrierefreiheit oder Leistung verwenden soll.

Automatisch debuggen, emulieren und prüfen

Mit der Version 1.0 kann Ihr Codierungs-Agent jetzt erweiterte Debugging-Aufgaben ausführen, die bisher manuell erledigt werden mussten.

Qualitätsprüfungen automatisieren

Ihr Agent kann jetzt Lighthouse-Prüfungen ausführen, um die Qualität von Websites zu bewerten. Er kann Probleme mit Barrierefreiheit, SEO, Best Practices und dem agentenbasierten Browsen erkennen. Es ist, als hätten Sie einen Linter, der die Laufzeit versteht. Wenn er als Qualitätssicherung eingesetzt wird, wird Ihr Codierungs-Agent zu einem Experten, der kritische Blockierungen erkennt, bevor sie die Produktion erreichen.

Nutzererfahrungen aus der Praxis emulieren

Ihr Agent kann mit den Entwicklertools für Agents testen, wie eine Website auf verschiedenen Geräten oder an verschiedenen Standorten mithilfe von Emulationstools aussieht und funktioniert. Er kann Fenster in der Größe ändern, Geostandorte simulieren und die Netzwerk- und CPU-Geschwindigkeiten drosseln, um reale Bedingungen nachzuahmen. So kann Ihr Agent mobilspezifische Verhaltensweisen wie Burgermenüs testen, ohne dass Sie die Größe Ihres Browsers manuell ändern müssen.

Chrome-Erweiterungen entwickeln und debuggen

Sie können Ihren Agent nicht nur bei der Entwicklung von Chrome-Erweiterungen unterstützen lassen, sondern ihn auch zum Debuggen verwenden. Ihr Agent kann Erweiterungsaktionen direkt installieren, neu laden und auslösen. So lässt sich der häufige Zyklus aus Speichern und Aktualisieren während der Entwicklung automatisieren. Er kann auch Hintergrundskripts und Erweiterungsseiten untersuchen, um Ihnen zu helfen, Fehler in komplexeren Browserkonfigurationen zu beheben.

WebMCP-Tools debuggen und testen

Wir bieten auch umfassende Sichtbarkeit für die WebMCP-Testphase (Web Model Context Protocol), um Ihnen bei der Implementierung dieser neuen API zu helfen.

Anstatt sich auf Signale zu verlassen, um einen Plan für die Navigation im DOM abzuleiten, kann Ihr Agent direkt mit strukturierten Tools interagieren, die Sie mit WebMCP verfügbar machen. So lassen sich diese Tools einfacher entwickeln, testen und debuggen: Ihr Agent kann sie in Echtzeit auflisten, programmatisch aufrufen und ihre Richtigkeit überprüfen. Dadurch wird der Prozess vereinfacht, WebMCP-Unterstützung zu Ihrer Website hinzuzufügen und sie zu testen.

Speicherlecks erkennen und debuggen

Wir haben auch spezielle Tools für die Speicheranalyse hinzugefügt. Ihr Agent kann jetzt Heap-Snapshots erstellen, um Speicherlecks wie getrennte DOM-Knoten zu erkennen. Durch die Verwendung spezieller Fähigkeiten zum Debuggen von Speicherlecks fungiert der Agent als Leistungsexperte, der Ihnen hilft, Ihre Anwendung schlank und schnell zu halten.

Sitzungen mit automatischer Verbindung übergeben

Sie können Ihren aktuellen Browserkontext für einen Agent freigeben, anstatt dass der Agent eine eigene Sandbox-Browserinstanz öffnet (so erhalten Agents normalerweise Zugriff auf den Browser). Das ist ideal für das Debuggen von Dingen, für die eine Anmeldung erforderlich ist, z. B. ein authentifiziertes Dashboard. In diesem Fall soll der KI-Agent die technische Untersuchung übernehmen, ohne dass Sie alles neu authentifizieren müssen.

Internen Zustand mit Entwicklertools von Drittanbietern verfügbar machen

Mit Entwicklertools von Drittanbietern kann Ihre Webanwendung den internen Status und Komponentendetails direkt für KI-Agents freigeben. Durch den Zugriff auf Daten, die normalerweise für die Standardanalyse ausgeblendet sind, erhalten Agents den Kontext, den sie zum Verständnis komplexer Logik benötigen. So erhalten Sie genauere Debugging-Vorschläge, die auf dem tatsächlichen Verhalten der Anwendung im Browser basieren.

Jetzt starten

Sie können die stabile Version mit npm installieren oder direkt in Ihrem bevorzugten Agent konfigurieren:

Antigravity

Chrome-Entwicklertools für Agents ist bereits mit Antigravity 2.0 gebündelt. Sie können es sofort mit dem Browser-Sub-Agent verwenden. Verwenden Sie einen Slash-Befehl wie:

/browser Navigate to the Google homepage

Wenn Sie auf spezielle Agent-Fähigkeiten zugreifen möchten, empfehlen wir Ihnen, das Entwicklertools-Plug-in während des Schritts Mit Google entwickeln der Ersteinrichtung oder in den Anwendungseinstellungen zu installieren. Weitere Informationen finden Sie in der Dokumentation zum Antigravity-Browser Sub-Agent.

Gemini CLI

Verwenden Sie den folgenden Befehl, um das MCP-Paket und die Fähigkeiten als Erweiterung zu installieren:

$ gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

Claude Code

Verwenden Sie die folgenden Slash-Befehle in Claude Code, um Chrome-Entwicklertools für Agents als Claude Code-Plug-in zu installieren. Fügen Sie die Marketplace-Registrierung hinzu:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

Installieren Sie das Plug-in über die Marketplace-Registrierung:

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Ausführlichere Anleitungen und Beispiel-Prompts finden Sie in der Dokumentation zu Chrome-Entwicklertools für Agents. Sie können sich auch den Quellcode auf GitHub ansehen.