CyberAgent, l'une des principales entreprises informatiques au Japon, propose un large éventail de services en ligne, y compris la plate-forme de blogs populaire Ameba. L'équipe a été confrontée à un défi de taille avec les erreurs d'exécution, qui étaient difficiles à détecter par le biais de tests automatisés et nécessitaient une intervention manuelle chronophage.
Ce document explique comment CyberAgent a utilisé le serveur MCP (Model Context Protocol) des outils de développement Chrome pour passer d'un processus manuel à un workflow automatisé, ce qui a permis de gagner du temps pour les développeurs et d'améliorer la fiabilité de leur flux de test.
Le défi : un workflow manuel et limité
Spindle, le système de conception d'Ameba, est une collection de composants d'UI réutilisables utilisés pour créer l'interface de la plate-forme de blogs. Il s'appuie sur Storybook pour le développement et les tests de composants d'interface utilisateur.
Auparavant, le workflow de CyberAgent pour résoudre les erreurs d'exécution était un cycle manuel et répétitif. Un développeur vérifie chaque composant dans un navigateur, applique un correctif, puis le vérifie à nouveau. Avec un grand nombre de pages et de composants, cette dépendance à la confirmation visuelle avait ses limites, ce qui rendait difficile la détection de chaque bug.
Solution : agent de débogage utilisant le MCP des outils pour les développeurs Chrome
Pour relever ce défi, l'équipe s'est tournée vers le serveur MCP des outils pour les développeurs Chrome. Après une configuration simple à l'aide du guide d'intégration officiel, ils ont pu demander immédiatement à un agent IA (Claude) d'automatiser l'ensemble du workflow de débogage.
Avec une seule requête, l'agent peut interagir avec les outils de développement en traitant les informations sur l'état du navigateur capturées par le MCP des outils de développement Chrome, accéder au contexte du système de fichiers et lire les journaux de la console. Il a ensuite identifié les erreurs de manière autonome et les a corrigées sans intervention manuelle.
Voici la requête initiale qu'ils ont utilisée :
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'agent d'IA a ensuite audité l'instance Storybook, en parcourant des histoires entières pour lire les erreurs, appliquer les corrections de code et confirmer la réussite de chaque correction.
Impact : des vérifications manuelles aux corrections automatisées
Les résultats ont été rapides. En une heure environ, l'agent d'IA a audité de manière autonome les 32 composants et les 236 stories du système de conception Spindle.
Bien que l'agent ait identifié et corrigé une erreur d'exécution et deux avertissements, la véritable valeur de l'expérience résidait dans l'assurance du négatif : confirmer que la grande majorité de la bibliothèque était exempte d'erreurs sans qu'un développeur ait à cliquer manuellement sur des centaines d'états.
Auparavant, ce type d'audit complet était visuellement épuisant et sujet à des erreurs humaines. En confiant cette tâche à l'outil MCP des outils pour les développeurs Chrome, CyberAgent a obtenu les résultats suivants :
- Couverture d'audit à 100 % : l'agent a vérifié mécaniquement chaque histoire, en s'assurant que les composants "propres" l'étaient réellement. Il s'agit d'un niveau de diligence difficile à maintenir manuellement.
- Aucun faux négatif : contrairement aux suites de tests automatisés qui peuvent passer à côté d'anomalies visuelles d'exécution, le serveur MCP a permis à l'agent de valider l'état réel du navigateur, ce qui garantit une grande fiabilité.
- Décharge cognitive : les développeurs peuvent faire confiance au système pour gérer les tâches répétitives et fastidieuses, ce qui leur permet de se concentrer sur la logique complexe plutôt que sur les vérifications de routine.
Comme l'a fait remarquer le développeur Web Kota Yanagi, l'avantage résidait dans le transfert de responsabilité :
"Il est très pratique de décharger les vérifications des erreurs et des avertissements d'exécution que j'effectuais manuellement dans le navigateur. J'apprécie également de pouvoir décrire des opérations complexes en langage naturel et de voir l'outil passer de la lecture des journaux d'erreurs à la résolution du problème."
Le succès de ce workflow automatisé a même conduit CyberAgent à mettre à jour son Guide des agents Spindle interne pour ses agents d'IA. Ce guide établit désormais le MCP des outils pour les développeurs Chrome comme serveur de débogage par défaut pour leur agent d'IA, Claude. Il formalise son utilisation comme bonne pratique et montre leur confiance dans ce nouveau processus basé sur l'IA.
Les corrections concrètes ont été implémentées dans deux demandes d'extraction, que vous pouvez consulter sur GitHub :
CyberAgent a ensuite amélioré le prompt et publié le résultat final.
Commentaires et projets futurs
CyberAgent a apprécié la flexibilité et le nombre d'options disponibles dans le MCP des outils pour les développeurs Chrome. Ils ont également fourni de précieux commentaires pour les futures améliorations, en notant que si l'outil est puissant, l'utilisation de ses fonctionnalités les plus avancées nécessite un certain niveau de connaissances de l'utilisateur.
À l'avenir, l'équipe souhaite intégrer plus en profondeur le panneau "Performances" des outils de développement. Ils envisagent un workflow dans lequel un agent pourrait valider les signaux Web essentiels, puis procéder à une analyse plus approfondie des performances à l'aide du panneau "Performances" pour analyser et suggérer des améliorations.
Kazunari Hara, expert en développement chez CyberAgent, a partagé son émerveillement, soulignant l'efficacité de l'outil et son potentiel pour de futures applications :
"J'ai été stupéfait de voir le navigateur corriger automatiquement les erreurs directement à partir des journaux. Les tâches qui étaient auparavant manquées ou qui prenaient beaucoup de temps peuvent désormais être automatisées de manière fiable, ce qui améliore l'efficacité du développement. Étant donné que le MCP Chrome DevTools offre autant de fonctionnalités dans un environnement d'exécution réel, je pense qu'il sera utile dans de nombreuses situations à l'avenir."
Conclusion
En intégrant le MCP Chrome DevTools à son workflow, CyberAgent a réussi à automatiser une tâche de débogage complexe et chronophage. Leur expérience démontre l'immense potentiel des outils optimisés par l'IA pour améliorer la productivité des développeurs.
Le processus a été entièrement automatisé, ce qui a permis d'éliminer les vérifications manuelles et de s'assurer qu'aucune erreur n'était passée inaperçue. Bien que l'implémentation actuelle ait déjà prouvé sa valeur, les commentaires de CyberAgent mettent en évidence un avenir prometteur où le MCP des outils de développement Chrome pourra leur permettre d'effectuer des tâches d'analyse et d'optimisation des performances encore plus sophistiquées directement dans le navigateur.