CyberAgent, una empresa de TI líder en Japón, proporciona una amplia gama de servicios en línea, incluida la popular plataforma de blogs Ameba. El equipo enfrentó un desafío importante con los errores de tiempo de ejecución que eran difíciles de detectar a través de pruebas automatizadas, lo que requería una intervención manual que consumía mucho tiempo.
En este documento, se explora cómo CyberAgent usó el servidor del Protocolo de contexto del modelo (MCP) de Chrome DevTools para pasar de un proceso manual a un flujo de trabajo automatizado, lo que ahorró tiempo a los desarrolladores y mejoró la confiabilidad de su flujo de pruebas.
El desafío: un flujo de trabajo manual y limitado
El sistema de diseño de Ameba, Spindle, es una colección de componentes de IU reutilizables que se usan para compilar la interfaz de la plataforma de blogs. Se basa en Storybook para el desarrollo y las pruebas de componentes de la IU.
Anteriormente, el flujo de trabajo de CyberAgent para abordar los errores de tiempo de ejecución era un ciclo manual repetitivo. Un desarrollador revisaría cada componente en un navegador, aplicaría una corrección y, luego, lo volvería a revisar. Con una gran cantidad de páginas y componentes, esta dependencia de la confirmación visual tenía sus límites, lo que dificultaba detectar todos los errores.
La solución: Depuración del agente con el MCP de las Herramientas para desarrolladores de Chrome
Para superar este desafío, el equipo recurrió al servidor de MCP de las Herramientas para desarrolladores de Chrome. Después de una configuración sencilla con la guía oficial de incorporación, pudieron indicarle de inmediato a un agente de IA (Claude) que automatizara todo el flujo de trabajo de depuración.
Con una sola instrucción, el agente podría interactuar con las Herramientas para desarrolladores procesando la información del estado del navegador capturada por el MCP de las Herramientas para desarrolladores de Chrome, acceder al contexto del sistema de archivos y leer los registros de la consola. Luego, identificó errores de forma autónoma y aplicó correcciones sin intervención manual.
La instrucción inicial que usó fue la siguiente:
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.
El agente de IA procedió a auditar la instancia de Storybook, navegando por historias completas para leer errores, aplicar correcciones de código y confirmar el éxito de cada corrección.
El impacto: de las verificaciones manuales a las correcciones automatizadas
Los resultados fueron rápidos. En aproximadamente una hora, el agente de IA auditó de forma autónoma los 32 componentes y las 236 historias del sistema de diseño de Spindle.
Si bien el agente identificó y corrigió un error de tiempo de ejecución y dos advertencias, el verdadero valor del experimento radicó en la confirmación de lo negativo: se confirmó que la gran mayoría de la biblioteca no tenía errores sin necesidad de que un desarrollador hiciera clic manualmente en cientos de estados.
Anteriormente, este tipo de auditoría integral era visualmente agotador y propenso a la supervisión humana. Al delegar esta tarea en el MCP de las Herramientas para desarrolladores de Chrome, CyberAgent logró lo siguiente:
- Cobertura de auditoría del 100%: El agente verificó mecánicamente cada historia, lo que garantizó que los componentes "limpios" fueran realmente limpios, un nivel de diligencia difícil de mantener de forma manual.
- Cero falsos negativos: A diferencia de los conjuntos de pruebas automatizadas que podrían pasar por alto anomalías visuales en el tiempo de ejecución, el servidor de MCP permitió que el agente validara el estado real del navegador, lo que garantizó una alta confiabilidad.
- Descarga cognitiva: Los desarrolladores podrían confiar en que el sistema se encargue del "trabajo pesado" repetitivo, lo que les permitiría enfocarse en la lógica compleja en lugar de las verificaciones de rutina.
Como señaló el desarrollador web Kota Yanagi, el beneficio fue el cambio en la responsabilidad:
"Fue muy conveniente descargar los errores de tiempo de ejecución y las verificaciones de advertencias que solía hacer manualmente en el navegador. También me gusta que ahora puedo describir operaciones complejas en lenguaje natural y que la herramienta puede pasar de leer los registros de errores a solucionar el problema directamente".
El éxito de este flujo de trabajo automatizado incluso llevó a CyberAgent a actualizar su Guía de agentes de Spindle interna para sus agentes de IA. En esta guía, ahora se establece el MCP de las Herramientas para desarrolladores de Chrome como el servidor de depuración predeterminado para su agente de IA, Claude, lo que formaliza su uso como práctica recomendada y demuestra su confianza en este nuevo proceso potenciado por IA.
Las correcciones concretas se implementaron en dos solicitudes de extracción, que puedes revisar en GitHub:
CyberAgent avanzó aún más la instrucción y publicó este resultado final.
Comentarios y planes futuros
CyberAgent quedó conforme con la flexibilidad y la cantidad de opciones disponibles en el MCP de las Herramientas para desarrolladores de Chrome. También proporcionaron comentarios valiosos para futuras mejoras, y señalaron que, si bien la herramienta es potente, usar sus funciones más avanzadas requiere un cierto nivel de conocimiento del usuario.
De cara al futuro, el equipo está interesado en una integración más profunda con el panel Rendimiento de Herramientas para desarrolladores. Imaginan un flujo de trabajo en el que un agente podría validar las Métricas web esenciales y, luego, realizar un análisis de rendimiento más detallado con el panel Rendimiento para analizar y sugerir mejoras.
Kazunari Hara, experto en desarrollo de CyberAgent, compartió su asombro y destacó la eficiencia de la herramienta y su potencial para futuras aplicaciones:
"Me sorprendió ver cómo el navegador corregía automáticamente los errores directamente desde los registros. Las tareas que antes se omitían o tardaban mucho tiempo ahora se pueden automatizar de manera confiable, lo que mejora la eficiencia del desarrollo. Dado que el MCP de las Herramientas para desarrolladores de Chrome ofrece tantas funciones en un entorno de ejecución real, espero que sea útil en muchas situaciones diferentes en el futuro".
Conclusión
Al integrar el MCP de las Herramientas para desarrolladores de Chrome en su flujo de trabajo, CyberAgent automatizó con éxito una tarea de depuración compleja y que requería mucho tiempo. Su experiencia demuestra el inmenso potencial de las herramientas potenciadas por IA para aumentar la productividad de los desarrolladores.
El proceso logró una automatización completa, lo que eliminó la necesidad de realizar verificaciones manuales y garantizó que no se pasaran por alto errores. Si bien la implementación actual ya demostró su valor, los comentarios de CyberAgent destacan un futuro emocionante en el que el MCP de Herramientas para desarrolladores de Chrome puede permitirles realizar tareas de análisis y optimización del rendimiento aún más sofisticadas directamente en el navegador.