Veröffentlicht: 18. Juni 2026
Um eine moderne Webanwendung effektiv zu debuggen, benötigt ein KI-Agent mehr als nur Ihren Quellcode. Er muss verstehen, wie sich die Anwendung zur Laufzeit verhält.
Wir freuen uns, Entwicklertools von Drittanbietern für die Chrome-Entwicklertools für Agents einzuführen. Ihre Apps und Frameworks können KI-Agenten jetzt einen direkten Einblick in ihren internen Status geben. So können Kundenservicemitarbeiter die Verbindung zwischen dem, was auf dem Bildschirm passiert, und der Logik im Hintergrund besser nachvollziehen.
Das Ziel: Über die statische Analyse hinaus
Die moderne Webentwicklung basiert auf Abstraktionen – Frameworks wie Angular, React oder Vue; CMS-Plattformen wie WordPress oder Shopify; und Bibliotheken für CSS, 3D-Grafiken oder Animationen. DevTools hat zwar direkten Zugriff auf das endgültig gerenderte DOM, die „Wahrheit“ einer Anwendung liegt jedoch oft im internen Status des Frameworks: Komponentenhierarchien, JavaScript-Signale oder Backend-Status.
Unser Ziel mit Drittanbieter-Entwicklertools ist es, einen Weg zu schaffen, über den jede Bibliothek diesen umfangreichen, umsetzbaren Kontext mit KI-Agenten teilen kann. So können Kundenservicemitarbeiter Probleme beheben, die für sie zuvor „unsichtbar“ waren, z. B.:
- Komponentenhierarchien:DOM-Elemente auf der Seite werden direkt der entsprechenden Framework-Komponente und dem internen Status zugeordnet.
- Prüfung des internen Status:Greifen Sie direkt in der Debugging-Sitzung auf den serverseitigen Status oder Datenbankinhalte zu.
Funktionsweise: Die Discovery API
Drittanbieter-Entwicklertools verwenden eine ereignisbasierte JavaScript API. Der Chrome DevTools-MCP-Server ermittelt diese Tools, indem er ein devtoolstooldiscovery-Ereignis für das globale window-Objekt sendet. Das Ereignis devtoolstooldiscovery wird automatisch bei jeder Seitennavigation oder wenn die ausgewählte Seite geändert wird, gesendet. Es kann auch explizit mit dem MCP-Tool list_3p_developer_tools gesendet werden.
Eigene Tools implementieren
Wenn Sie Tools aus Ihrer Bibliothek oder Anwendung verfügbar machen möchten, müssen Sie auf dieses Discovery-Ereignis warten und mit einem ToolGroup antworten.
window.addEventListener('devtoolstooldiscovery', (event) => {
event.respondWith({
name: "My Library Tools",
description: "Tools for inspecting internal library state",
tools: [
{
name: "getInternalState",
description: "Returns the current internal state of the framework.",
inputSchema: {
type: "object",
properties: {
componentId: { type: "string" }
}
},
execute: async (input) => {
// Access your framework's internal registry
return myFramework.getState(input.componentId);
}
}
]
});
});
So wird das umgesetzt:
- Schema definieren:Verwenden Sie JSON-Schema, um die Eingabe zu definieren, die Ihr Tool erwartet.
- Logik verarbeiten:Implementieren Sie eine
execute-Funktion, die im Kontext der Seite ausgeführt wird und serialisierbare Daten zurückgibt. - DOM-Elemente:Nicht serialisierbare Objekte können nicht zwischen der Seite und den DevTools für Agents gesendet werden. DOM-Elemente sind eine Ausnahme. Wenn Ihre Tools DOM-Elemente zurückgeben, werden diese in DevTools für Agents automatisch denselben UIDs zugeordnet, die vom
take_snapshot-Tool verwendet werden. So kann Ihr Agent auf dieselbe Weise mit allen Seitenelementen interagieren, unabhängig davon, ob sie aus einem Framework oder einem Seitensnapshot stammen.
Über das MCP mit Tools interagieren
Nachdem Sie Ihre Tools registriert haben, kann Ihr Coding-Agent über die DevTools für Agents mit ihnen interagieren. Das list_3p_developer_tools-MCP-Tool gibt Beschreibungen der auf der Seite verfügbaren Drittanbieter-Tools zurück. Wenn sich die ausgewählte Seite ändert (z. B. nach der Navigation), hängt DevTools außerdem eine Liste der verfügbaren Tools an die MCP-Toolantwort an.
Um diese Tools zu verwenden, ruft Ihr Agent execute_3p_developer_tool auf. In DevTools werden Eingabeparameter automatisch validiert, um sicherzustellen, dass sie der Definition des Tools entsprechen.
Sie können Tools auch mit dem evaluate_script-MCP-Tool aufrufen. Ihr Kundenservicemitarbeiter stellt Ihnen ein JavaScript-Snippet zur Verfügung, das von den Entwicklertools auf der Seite ausgeführt wird. Mit diesem Snippet können Drittanbieter-Entwicklertools aufgerufen und ihre Ausgabe sofort für weitere Berechnungen verwendet werden.
Die Verwendung von evaluate_script ist für komplexes Debugging effektiv, da Agents Folgendes ermöglichen:
- Compose-Vorgänge: Mehrere Schritte in einer einzigen Ausführung kombinieren.
- Nicht serialisierbare Werte verarbeiten: Framework-spezifische Objekte oder Signale direkt im Seitenkontext verarbeiten.
- Leistung optimieren: Minimieren Sie den Serialisierungsaufwand und vermeiden Sie mehrere Roundtrips zwischen dem Agent und dem Browser.
Erster Erfolg: Angular-Integration
Wir haben mit dem Angular-Team zusammengearbeitet, das zwei Drittanbieter-Entwicklertools implementiert hat:
- Signal Graph Tool:Mit diesem Tool können Kundenservicemitarbeiter Beziehungen zwischen dem Status und der Ansicht visualisieren. So können sie Abhängigkeiten erkennen, die zu Endlosschleifen oder fehlgeschlagenen Aktualisierungen führen.
- Tool für den Dependency Injection (DI)-Graph:Stellt die Element-Injectors bereit, sodass Kundenservicemitarbeiter genau sehen können, wo ein Dienst bereitgestellt wird oder fehlt. Da der DI-Graph von Angular nur zur Laufzeit erstellt wird, können Anbieterfehler nicht allein durch statische Analysen behoben werden.
Das React-Team hat auch mit Experimenten mit Drittanbieter-Entwicklertools begonnen.
Mit uns die Zukunft des agentischen Debuggens gestalten
Diese experimentelle Funktion ist in den Chrome-Entwicklertools für Agents ab Version 0.25.0 verfügbar. Verwenden Sie das Befehlszeilenflag --categoryExperimentalThirdParty, um es zu aktivieren.
Wenn Sie ein Framework, eine Bibliothek oder ein Tool verwalten und die Debugging-Funktionen für Coding-Agents verbessern möchten, würden wir uns freuen, mit Ihnen zusammenzuarbeiten:
- Dokumentation ansehen:Technischer Leitfaden auf GitHub
- Kontakt aufnehmen:Wir suchen Partner, die uns helfen, diese APIs zu optimieren und die Zukunft der KI-basierten Web-Fehlerbehebung zu gestalten. Sie können ein Problem im GitHub-Repository erstellen, um uns zu kontaktieren.
Gestalten Sie mit uns die Zukunft der agentischen Webentwicklung!