CyberAgent, een toonaangevend IT-bedrijf in Japan, biedt een breed scala aan onlinediensten, waaronder het populaire blogplatform Ameba. Het team stond voor een aanzienlijke uitdaging: runtimefouten waren moeilijk te detecteren met geautomatiseerde tests, waardoor tijdrovende handmatige interventies nodig waren.
In dit document wordt beschreven hoe CyberAgent de Chrome DevTools Model Context Protocol (MCP)-server heeft gebruikt om van een handmatig proces over te stappen op een geautomatiseerde workflow. Hierdoor bespaarden ontwikkelaars tijd en werd de betrouwbaarheid van hun testflow verbeterd.
De uitdaging: een handmatige en beperkte workflow
Het Ameba-ontwerpsysteem, Spindle, is een verzameling herbruikbare UI-componenten die gebruikt worden om de interface van het blogplatform te bouwen. Het is gebaseerd op Storybook voor de ontwikkeling en het testen van UI-componenten.
Voorheen was de workflow van CyberAgent voor het oplossen van runtimefouten een repetitieve, handmatige cyclus. Een ontwikkelaar controleerde elk onderdeel in een browser, paste een oplossing toe en controleerde het vervolgens opnieuw. Met een groot aantal pagina's en componenten had deze afhankelijkheid van visuele bevestiging zijn beperkingen, waardoor het moeilijk was om elke bug te ontdekken.
De oplossing: Debugging agent met Chrome DevTools MCP
Om deze uitdaging te overwinnen, schakelde het team over op de Chrome DevTools MCP-server. Na een eenvoudige installatie met behulp van de officiële onboardinggids konden ze direct een AI-agent (Claude) instrueren om de volledige debugworkflow te automatiseren.
Met één prompt kon de agent met DevTools communiceren door browserstatusinformatie te verwerken die was vastgelegd door Chrome DevTools MCP, toegang te krijgen tot de context van het bestandssysteem en consolelogs te lezen. Vervolgens identificeerde de agent autonoom fouten en implementeerde hij oplossingen zonder handmatige tussenkomst.
De eerste opdracht die ze gebruikten was als volgt:
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.
De AI-agent ging verder met het controleren van het Storybook-exemplaar en navigeerde door volledige verhalen om fouten te lezen, codecorrecties toe te passen en het succes van elke oplossing te bevestigen.
De impact: van handmatige controles naar geautomatiseerde oplossingen
De resultaten kwamen snel. In ongeveer een uur controleerde de AI-agent autonoom alle 32 componenten en 236 verdiepingen in het Spindle-ontwerpsysteem.
Hoewel de agent één runtime-fout en twee waarschuwingen identificeerde en oploste, lag de echte waarde van het experiment in de zekerheid van het negatieve: de bevestiging dat het overgrote deel van de bibliotheek foutloos was, zonder dat een ontwikkelaar handmatig door honderden statussen hoefde te klikken.
Voorheen was dit type uitgebreide audit visueel vermoeiend en afhankelijk van menselijk toezicht. Door deze taak uit te besteden aan Chrome DevTools MCP, bereikte CyberAgent het volgende:
- 100% auditdekking : de agent verifieerde mechanisch elk afzonderlijk verhaal en zorgde ervoor dat 'schone' componenten ook daadwerkelijk schoon waren. Dit is een niveau van zorgvuldigheid dat handmatig moeilijk vol te houden is.
- Nul foutnegatieven : in tegenstelling tot geautomatiseerde testsuites die visuele runtime-anomalieën mogelijk over het hoofd zien, kon de agent dankzij de MCP-server de werkelijke browserstatus valideren, wat een hoge betrouwbaarheid garandeert.
- Cognitieve offloading : ontwikkelaars konden erop vertrouwen dat het systeem het repetitieve 'vuile werk' zou afhandelen, zodat ze zich konden concentreren op complexe logica in plaats van routinematige controles.
Zoals webontwikkelaar Kota Yanagi opmerkte, was het voordeel de verschuiving van verantwoordelijkheid:
"Het is erg handig om runtime-fouten en waarschuwingscontroles, die ik voorheen handmatig in de browser uitvoerde, uit te schakelen. Ik vind het ook fijn dat ik complexe bewerkingen nu in natuurlijke taal kan beschrijven en dat de tool direct van het lezen van foutlogboeken naar het oplossen van het probleem kan gaan."
Het succes van deze geautomatiseerde workflow heeft CyberAgent er zelfs toe aangezet om hun interne Spindle Agents Guide voor hun AI-agenten te updaten. Deze gids stelt Chrome DevTools MCP nu in als de standaard debuggingserver voor hun AI-agent Claude, waarmee het gebruik ervan als best practice wordt geformaliseerd en hun vertrouwen in dit nieuwe AI-gestuurde proces wordt getoond.
De concrete oplossingen zijn geïmplementeerd in twee pull requests, die u op GitHub kunt bekijken:
CyberAgent heeft de prompt verder ontwikkeld en deze uiteindelijke output gepubliceerd.
Feedback en toekomstplannen
CyberAgent was tevreden met de flexibiliteit en het aantal opties binnen Chrome DevTools MCP. Ze gaven ook waardevolle feedback voor toekomstige verbeteringen. Ze merkten op dat de tool weliswaar krachtig is, maar dat het gebruik van de meer geavanceerde functies een zekere mate van gebruikerskennis vereist.
Vooruitkijkend is het team geïnteresseerd in een diepere integratie met het DevTools Performance-paneel. Ze zien een workflow voor zich waarin een agent Core Web Vitals kan valideren en vervolgens een diepgaandere prestatieanalyse kan uitvoeren met behulp van het Performance-paneel om verbeteringen te analyseren en voor te stellen.
Ontwikkelaar-expert bij CyberAgent, Kazunari Hara, deelde zijn verbazing en benadrukte de efficiëntie van de tool en de mogelijkheden voor toekomstige toepassingen:
Ik was verbaasd toen ik zag dat de browser automatisch fouten rechtstreeks vanuit de logs repareerde. Taken die voorheen werden gemist of lang duurden, kunnen nu betrouwbaar worden geautomatiseerd, wat de ontwikkelefficiëntie verbetert. Omdat de Chrome DevTools MCP zoveel functies biedt in een echte runtime-omgeving, verwacht ik dat deze in de toekomst in veel verschillende situaties nuttig zal zijn.
Conclusie
Door Chrome DevTools MCP in hun workflow te integreren, heeft CyberAgent met succes een complexe en tijdrovende debugtaak geautomatiseerd. Hun ervaring toont het enorme potentieel van AI-tools om de productiviteit van ontwikkelaars te verhogen.
Het proces is volledig geautomatiseerd, waardoor handmatige controles niet meer nodig zijn en er geen fouten over het hoofd worden gezien. Hoewel de huidige implementatie zijn waarde al heeft bewezen, wijst de feedback van CyberAgent op een veelbelovende toekomst waarin Chrome DevTools MCP nog geavanceerdere prestatieanalyse- en optimalisatietaken rechtstreeks vanuit de browser mogelijk maakt.