CyberAgent ist ein führendes IT-Unternehmen in Japan und bietet eine Vielzahl von Onlinediensten an, darunter die beliebte Blogging-Plattform Ameba. Das Team stand vor einer großen Herausforderung mit Laufzeitfehlern, die durch automatisierte Tests nur schwer zu erkennen waren und zeitaufwendige manuelle Eingriffe erforderten.
In diesem Dokument wird beschrieben, wie CyberAgent den MCP-Server (Model Context Protocol) von Chrome DevTools verwendet hat, um von einem manuellen Prozess zu einem automatisierten Workflow zu wechseln. Dadurch konnten Entwickler Zeit sparen und die Zuverlässigkeit des Testablaufs verbessern.
Die Herausforderung: ein manueller und eingeschränkter Workflow
Das Ameba-Designsystem, Spindle, ist eine Sammlung wiederverwendbarer UI-Komponenten, die zum Erstellen der Benutzeroberfläche der Blogging-Plattform verwendet werden. Es basiert auf Storybook für die Entwicklung und das Testen von UI-Komponenten.
Zuvor war der Workflow von CyberAgent zur Behebung von Laufzeitfehlern ein sich wiederholender, manueller Zyklus. Ein Entwickler würde jede Komponente in einem Browser prüfen, eine Korrektur anwenden und sie dann noch einmal prüfen. Bei einer großen Anzahl von Seiten und Komponenten stieß diese visuelle Bestätigung an ihre Grenzen, sodass es schwierig war, jeden Fehler zu finden.
Lösung: Agent mit Chrome DevTools MCP debuggen
Um diese Herausforderung zu meistern, wandte sich das Team an den Chrome DevTools-MCP-Server. Nach einer einfachen Einrichtung mithilfe des offiziellen Onboarding-Leitfadens konnten sie einen KI-Agenten (Claude) sofort anweisen, den gesamten Debugging-Workflow zu automatisieren.
Mit einem einzigen Prompt kann der Agent mit den Entwicklertools interagieren, indem er vom Chrome DevTools MCP erfasste Informationen zum Browserstatus verarbeitet, auf den Dateisystemkontext zugreift und Konsolenlogs liest. Anschließend wurden Fehler autonom erkannt und behoben, ohne dass ein manuelles Eingreifen erforderlich war.
Der ursprüngliche Prompt lautete so:
Currently, spindle-ui's Storybook is running, but runtime errors may be occurring.
Please use chrome-dev-tools-mcp to confirm the operation of the Story in the following steps:
Identify all target Stories. Confirm each and every one, no matter how many there are.
Confirm that the Story is displayed correctly using dev-tools-mcp.
Fix all errors.
Click and move through each Story from the top in the browser opened with mcp to confirm.
Der KI-Agent hat die Storybook-Instanz geprüft und sich durch ganze Geschichten navigiert, um Fehler zu lesen, Codekorrekturen anzuwenden und den Erfolg jeder Korrektur zu bestätigen.
Auswirkungen: von manuellen Prüfungen zu automatisierten Korrekturen
Die Ergebnisse ließen nicht lange auf sich warten. In etwa einer Stunde hat der KI-Agent alle 32 Komponenten und 236 Stories im Spindle-Designsystem autonom geprüft.
Der Agent hat zwar einen Laufzeitfehler und zwei Warnungen erkannt und behoben, der eigentliche Wert des Experiments lag jedoch in der Bestätigung des Negativen: Es wurde bestätigt, dass der Großteil der Bibliothek fehlerfrei war, ohne dass ein Entwickler Hunderte von Status manuell durchklicken musste.
Bisher war diese Art von umfassendem Audit visuell anstrengend und anfällig für menschliche Fehler. Durch die Auslagerung dieser Arbeit an die Chrome-Entwicklertools MCP konnte CyberAgent Folgendes erreichen:
- 100% ige Abdeckung durch das Audit: Der Agent hat jede einzelne Geschichte mechanisch überprüft und so dafür gesorgt, dass „saubere“ Komponenten tatsächlich sauber waren. Das ist manuell nur schwer zu erreichen.
- Keine falsch negativen Ergebnisse: Im Gegensatz zu automatisierten Testsuiten, bei denen visuelle Laufzeitanomalien möglicherweise nicht erkannt werden, konnte der Agent mit dem MCP-Server den tatsächlichen Browserstatus validieren, was für eine hohe Zuverlässigkeit sorgte.
- Kognitive Entlastung: Entwickler können dem System die sich wiederholenden „Routinearbeiten“ überlassen und sich auf komplexe Logik konzentrieren, anstatt Routineprüfungen durchzuführen.
Webentwickler Kota Yanagi wies darauf hin, dass der Vorteil in der Verlagerung der Verantwortung lag:
„Es ist sehr praktisch, dass ich Laufzeitfehler und Warnungen, die ich früher manuell im Browser geprüft habe, jetzt auslagern kann. Außerdem gefällt mir, dass ich jetzt komplexe Vorgänge in natürlicher Sprache beschreiben kann und das Tool Fehlerprotokolle liest und das Problem direkt behebt.“
Der Erfolg dieses automatisierten Workflows hat CyberAgent sogar dazu veranlasst, den internen Spindle Agents Guide für die KI-Agents zu aktualisieren. In diesem Leitfaden wird Chrome DevTools MCP nun als Standard-Debugging-Server für den KI-Agenten Claude festgelegt. Damit wird die Verwendung als Best Practice formalisiert und das Vertrauen in diesen neuen KI-gestützten Prozess unterstrichen.
Die konkreten Korrekturen wurden in zwei Pull-Anfragen implementiert, die Sie auf GitHub einsehen können:
CyberAgent hat den Prompt weiter verfeinert und diese finale Ausgabe veröffentlicht.
Feedback und zukünftige Pläne
CyberAgent war mit der Flexibilität und der Anzahl der Optionen in Chrome DevTools MCP zufrieden. Sie gaben auch wertvolles Feedback für zukünftige Verbesserungen und merkten an, dass für die Nutzung der erweiterten Funktionen des Tools ein gewisses Maß an Nutzerwissen erforderlich ist.
Das Team möchte die Integration mit dem Bereich „Leistung“ der Entwicklertools weiter ausbauen. Sie stellen sich einen Workflow vor, in dem ein Kundenservicemitarbeiter Core Web Vitals validieren und dann mit dem Leistungsbereich eine detailliertere Leistungsanalyse durchführen kann, um Verbesserungen zu analysieren und vorzuschlagen.
Kazunari Hara, Developer Expert bei CyberAgent, zeigte sich begeistert und hob die Effizienz des Tools und sein Potenzial für zukünftige Anwendungen hervor:
„Ich war erstaunt, als ich gesehen habe, dass der Browser Fehler automatisch direkt aus den Logs behoben hat. Aufgaben, die früher übersehen wurden oder lange gedauert haben, können jetzt zuverlässig automatisiert werden, was die Entwicklungseffizienz steigert. Da das Chrome DevTools MCP so viele Funktionen in einer echten Laufzeitumgebung bietet, gehe ich davon aus, dass es in Zukunft in vielen verschiedenen Situationen nützlich sein wird.“
Fazit
Durch die Integration von Chrome DevTools MCP in ihren Workflow konnte CyberAgent eine komplexe und zeitaufwendige Debugging-Aufgabe automatisieren. Ihre Erfahrungen zeigen das immense Potenzial von KI-basierten Tools zur Steigerung der Entwicklerproduktivität.
Der Prozess wurde vollständig automatisiert, sodass keine manuellen Prüfungen mehr erforderlich waren und keine Fehler übersehen wurden. Die aktuelle Implementierung hat sich bereits bewährt. Das Feedback von CyberAgent zeigt jedoch, dass Chrome DevTools MCP in Zukunft noch anspruchsvollere Leistungsanalysen und Optimierungsaufgaben direkt im Browser ermöglichen kann.