CyberAgent, una delle principali società IT in Giappone, offre un'ampia gamma di servizi online, tra cui la popolare piattaforma di blogging Ameba. Il team ha dovuto affrontare una sfida significativa con errori di runtime difficili da rilevare tramite test automatizzati, che richiedevano un intervento manuale dispendioso in termini di tempo.
Questo documento esplora in che modo CyberAgent ha utilizzato il server Model Context Protocol (MCP) di Chrome DevTools per passare da una procedura manuale a un flusso di lavoro automatizzato, risparmiando tempo agli sviluppatori e migliorando l'affidabilità del flusso di test.
La sfida: un workflow manuale e limitato
Il sistema di progettazione Ameba, Spindle, è una raccolta di componenti UI riutilizzabili utilizzati per creare l'interfaccia della piattaforma di blogging. Si basa su Storybook per lo sviluppo e il test dei componenti UI.
In precedenza, il flusso di lavoro di CyberAgent per risolvere gli errori di runtime era un ciclo manuale ripetitivo. Uno sviluppatore controllerebbe ogni componente in un browser, applicherebbe una correzione e poi lo controllerebbe di nuovo. Con un numero elevato di pagine e componenti, questa dipendenza dalla conferma visiva aveva i suoi limiti, rendendo difficile individuare ogni bug.
La soluzione: agente di debug che utilizza Chrome DevTools MCP
Per superare questa sfida, il team si è rivolto al server MCP di Chrome DevTools. Dopo una semplice configurazione utilizzando la guida all'onboarding ufficiale, hanno potuto istruire immediatamente un agente AI (Claude) per automatizzare l'intero flusso di lavoro di debug.
Con un unico prompt, l'agente può interagire con DevTools elaborando le informazioni sullo stato del browser acquisite da Chrome DevTools MCP, accedere al contesto del file system e leggere i log della console. Successivamente, ha identificato autonomamente gli errori e ha implementato le correzioni senza intervento manuale.
Il prompt iniziale utilizzato era il seguente:
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.
L'agente AI ha proceduto a controllare l'istanza di Storybook, navigando tra le storie complete per leggere gli errori, applicare le correzioni del codice e confermare la riuscita di ogni correzione.
Impatto: dai controlli manuali alle correzioni automatiche
I risultati sono stati rapidi. In circa un'ora, l'agente AI ha eseguito autonomamente il controllo di tutti i 32 componenti e 236 storie nel sistema di progettazione Spindle.
L'agente ha identificato e corretto un errore di runtime e due avvisi, ma il vero valore dell'esperimento risiede nella garanzia del negativo: la conferma che la stragrande maggioranza della libreria era priva di errori senza richiedere a uno sviluppatore di fare clic manualmente su centinaia di stati.
In precedenza, questo tipo di audit completo era visivamente estenuante e soggetto a errori umani. Delegando questo lavoro a Chrome DevTools MCP, CyberAgent ha ottenuto quanto segue:
- Copertura del 100% dell'audit: l'agente ha verificato meccanicamente ogni singola storia, assicurandosi che i componenti "puliti" fossero effettivamente puliti, un livello di diligenza difficile da mantenere manualmente.
- Nessun falso negativo: a differenza delle suite di test automatizzati che potrebbero non rilevare anomalie visive di runtime, il server MCP ha consentito all'agente di convalidare lo stato effettivo del browser, garantendo un'elevata affidabilità.
- Offload cognitivo: gli sviluppatori potrebbero affidarsi al sistema per gestire il "lavoro pesante" ripetitivo, consentendo loro di concentrarsi su logiche complesse anziché su controlli di routine.
Come ha osservato lo sviluppatore web Kota Yanagi, il vantaggio è stato il cambiamento di responsabilità:
"È stato molto comodo scaricare i controlli di errori di runtime e avvisi che prima eseguivo manualmente nel browser. Mi piace anche il fatto che ora posso descrivere operazioni complesse in linguaggio naturale e che lo strumento passi dalla lettura dei log degli errori alla risoluzione del problema."
Il successo di questo flusso di lavoro automatizzato ha persino portato CyberAgent ad aggiornare la propria guida interna agli agenti Spindleper i propri agenti AI. Questa guida ora stabilisce che Chrome DevTools MCP è il server di debug predefinito per l'agente AI Claude, formalizzando il suo utilizzo come best practice e dimostrando la fiducia in questo nuovo processo basato sull'AI.
Le correzioni concrete sono state implementate in due richieste pull, che puoi esaminare su GitHub:
CyberAgent ha ulteriormente migliorato il prompt e ha pubblicato questo output finale.
Feedback e piani futuri
CyberAgent è rimasta soddisfatta della flessibilità e del numero di opzioni disponibili all'interno di Chrome DevTools MCP. Hanno anche fornito feedback preziosi per i miglioramenti futuri, osservando che, sebbene lo strumento sia potente, l'utilizzo delle sue funzionalità più avanzate richiede un certo livello di conoscenza da parte dell'utente.
In futuro, il team è interessato a un'integrazione più profonda con il riquadro Rendimento di DevTools. Prevedono un flusso di lavoro in cui un agente possa convalidare i Segnali web essenziali e poi procedere a un'analisi più approfondita del rendimento utilizzando il pannello Rendimento per analizzare e suggerire miglioramenti.
L'esperto sviluppatore di CyberAgent, Kazunari Hara, ha espresso il suo stupore, sottolineando l'efficienza dello strumento e il suo potenziale per applicazioni future:
"Sono rimasto stupito quando ho visto il browser correggere automaticamente gli errori direttamente dai log. Le attività che prima venivano perse o richiedevano molto tempo ora possono essere automatizzate in modo affidabile, il che migliora l'efficienza dello sviluppo. Poiché l'MCP di Chrome DevTools offre così tante funzionalità in un ambiente di runtime reale, prevedo che sarà utile in molte situazioni diverse in futuro".
Conclusione
Integrando Chrome DevTools MCP nel proprio flusso di lavoro, CyberAgent ha automatizzato con successo un'attività di debug complessa e dispendiosa in termini di tempo. La loro esperienza dimostra l'immenso potenziale degli strumenti basati sull'AI per aumentare la produttività degli sviluppatori.
Il processo ha raggiunto l'automazione completa, eliminando la necessità di controlli manuali e garantendo che non siano stati persi errori. Sebbene l'implementazione attuale abbia già dimostrato il suo valore, il feedback di CyberAgent evidenzia un futuro entusiasmante in cui Chrome DevTools MCP può consentire loro di eseguire attività di analisi e ottimizzazione delle prestazioni ancora più sofisticate direttamente nel browser.