Michael Hablich a passé 20 ans à construire des outils pour développeurs chez Google. Il donne aujourd’hui aux agents de code les mêmes superpouvoirs de débogage que Chrome DevTools a offerts aux développeurs web il y a plus de dix ans. Découvrez le serveur MCP de Chrome DevTools !

Cet article est adapté de MCP MVP une interview de Michael Hablich, Chef de produit pour Chrome DevTools et Puppeteer chez Google.

Le débogage en développement web a changé de nature avec l’arrivée des agents de code. Plutôt que de fouiller méthodiquement une longue liste d’erreurs et d’avertissements console pour retracer l’origine d’un problème, il est souvent plus rapide et plus simple de copier tout le log et de le coller dans Claude Code ou Gemini CLI avec un laconique « corrige ça ». Puis on recommence. Et encore. Au lieu de peaufiner un design ou de construire une nouvelle fonctionnalité, vous êtes devenu un presse-papiers humain pour votre agent de code, faisant la navette entre deux systèmes qui devraient se parler directement.

Michael Hablich, Chef de produit pour Chrome DevTools et Puppeteer chez Google, appelle ça « coder avec un bandeau sur les yeux ». Votre agent peut écrire du code, mais il ignore totalement ce qui se passe quand ce code s’exécute dans un navigateur. Il ne voit pas les erreurs console, les requêtes réseau en échec, les décalages de mise en page ou les goulots d’étranglement de performance. Chrome DevTools MCP lui enlève ce bandeau.

« Maintenant, il y a une boucle de rétroaction intéressante », a confié Michael à RL Nabors lors d’une récente interview pour la série MCP MVP d’Arcade. « Demandez-lui de corriger un bug, puis de valider. Et si ça ne marche toujours pas, continuez à corriger jusqu’à ce que ça fonctionne vraiment. »

Comment le serveur MCP de Chrome DevTools assure le débogage et l’automatisation en coulisses

Chrome DevTools MCP offre à votre agent deux catégories de capacités : l’actuation et l’introspection :

  • Actuation / automatisation du navigateur La navigation vers des pages, les clics sur des éléments, le remplissage de formulaires et les captures d’écran sont tous pris en charge par Puppeteer, la bibliothèque Node.js de Google pour piloter Chrome. Elle gère les détails comme l’attente que le réseau soit inactif et le DOM prêt.
  • Introspection / débogage Ces outils permettent à votre agent de lire les messages console (avec stack traces sourcemappées), d’inspecter les requêtes réseau, d’enregistrer des traces de performance, de prendre des snapshots d’accessibilité et, depuis peu, de capturer des heap snapshots pour le débogage mémoire.

Ces deux couches communiquent avec Chrome via le Chrome DevTools Protocol (CDP), le même protocole bas niveau qui alimente DevTools, Playwright et tous les autres frameworks d’automatisation de navigateur. Si vous avez déjà ouvert un port de débogage distant pour Playwright, la configuration vous semblera familière. La différence, c’est que les frameworks de test n’utilisent généralement le CDP que pour l’automatisation. Chrome DevTools MCP s’appuie aussi sur des bibliothèques de code extraites du front-end DevTools pour les capacités de débogage : analyse réseau, profilage de performance, et le reste.

Le serveur expose environ 25 à 30 outils à tout agent de code compatible MCP (Gemini CLI, Claude Code, Cursor, Copilot ou Codex). Le raisonnement de Michael derrière le choix d’outils plus granulaires : « même l’automatisation la plus basique nécessite un outil pour lister les pages, un pour en sélectionner une, un pour naviguer, un pour prendre un snapshot et un pour cliquer sur un élément. Ça fait cinq outils pour le workflow le plus simple qui soit. On pourrait théoriquement en réduire le nombre, mais les agents de code commencent alors à les utiliser de travers. C’est toujours un compromis. »

Itérer sur les retours développeurs a rendu le serveur meilleur

L’histoire commence à l’été 2024. L’équipe de Michael chez Google voyait un avenir où les agents écrivent la majeure partie du code, ce qui signifiait qu’ils devraient aussi en déboguer la majeure partie. Ils avaient Puppeteer pour l’automatisation, mais aucune API haut niveau pour le débogage : lecture des messages console, pose de points d’arrêt, analyse des requêtes réseau.

En parallèle, l’équipe construisait Gemini in DevTools, le panneau d’assistance IA qui vous permet de discuter avec Gemini des problèmes front-end directement dans l’interface Chrome DevTools. (Précision utile : cela utilise Gemini 2.5 Flash sur les serveurs de Google, pas le modèle embarqué qui propulse l’Prompt API de Chrome. Modèle différent, architecture différente.) Construire cet agent interne leur a appris quelles API haut niveau un agent aurait réellement besoin pour déboguer.

Quand Anthropic a lancé le Model Context Protocol (MCP) fin 2024, la pièce du puzzle s’est mise en place. Plutôt que de construire des intégrations personnalisées pour chaque agent de code, ils pouvaient supporter un seul protocole, MCP, et fonctionner partout.

Leur première tentative, un accès anticipé début 2025, modélisait le serveur comme un système multi-agent. Le serveur Chrome DevTools MCP faisait tourner son propre agent de débogage en interne, ajoutant une couche d’inférence supplémentaire par-dessus l’agent de code qui l’appelait. Mais les retours des partenaires et des Google Developer Experts étaient clairs : plusieurs niveaux de non-déterminisme aggravaient les choses plutôt que de les améliorer. La complexité ajoutée ne valait pas les quelques cas d’usage que le système gérait bien.

Ils ont donc tout repris à zéro à l’été 2025. Le nouveau serveur a été livré en septembre avec ~25 outils bas niveau et aucune compétence embarquée. « L’intelligence doit venir de l’agent de code », a dit Michael. Laissez le modèle raisonner. Donnez-lui de bons outils et rangez-vous.

Pour quiconque construit son propre serveur MCP, c’est peut-être la leçon la plus transférable de l’équipe Chrome DevTools : résistez à l’envie d’être malin côté serveur. Fournissez des briques bas niveau avec des interfaces claires. Laissez l’agent gérer le raisonnement.

En production : la boucle QA autonome de CyberAgent

Quand le serveur reconstruit a été lancé, CyberAgent, l’une des plus grandes entreprises tech japonaises, l’a adopté immédiatement. Ils ont pointé un agent de code équipé de Chrome DevTools MCP sur leur système de design Spindle dans Storybook, lui permettant d’auditer et de corriger les bugs runtime de façon autonome.

Le workflow suit exactement la boucle de rétroaction décrite par Michael : l’agent ouvre un composant, inspecte l’état du navigateur, identifie les erreurs, corrige le code, redéploie et valide que la correction fonctionne sans introduire de régressions. Puis il passe au composant suivant et continue.

C’était un travail que les développeurs de CyberAgent « n’avaient très souvent pas le temps de faire. Et la motivation non plus, parce que c’est parfois vraiment fastidieux. » L’étude de cas complète est publiée sur le blog Chrome developers.

Le passage de relais humain-agent qui fonctionne vraiment

Lors de l’interview, Michael a démontré un workflow d’une fluidité naturelle. Il avait une application de navigation de films buggée tournant dans Chrome Canary, avec des affiches de films intentionnellement en échec de chargement. Il a sélectionné une image cassée dans le panneau Éléments de DevTools, basculé vers Gemini CLI, et tapé : « J’ai sélectionné une image dans Chrome DevTools. Trouve pourquoi l’image ne se charge pas. »

L’agent s’est connecté à sa session navigateur en direct (Chrome affiche une boîte de dialogue de permission, le contrôle reste humain), a lu l’élément sélectionné, listé les requêtes réseau, pris un snapshot d’accessibilité, identifié que la moitié des chemins d’images étaient corrompus par une fonction buggée, corrigé le code et validé la correction. Les images se sont chargées.

Les développeurs sont déjà chez eux dans DevTools, à sélectionner des éléments et inspecter le DOM. Ils peuvent maintenant faire appel à un agent qui travaille à leurs côtés, inspecte les mêmes logs et éléments DOM qu’eux, sans copier-coller, sans captures d’écran, sans descriptions à rallonge. Une expérience développeur sans couture.

C’est possible depuis que Chrome 144 a ajouté la fonctionnalité --autoConnectqui permet au serveur MCP de se connecter à votre session navigateur en cours plutôt que d’en spawner une nouvelle. Vous pouvez utiliser DevTools vous-même, puis passer la main à votre agent de code, puis reprendre le contrôle. Fini le choix entre débogage manuel et automatisé.

Les skills : réécrire la documentation pour les agents

Michael est convaincu par les skills, et Chrome DevTools MCP en embarque maintenant. C’est la même intuition que Paul Asjes d’ElevenLabs a décrite dans une interview précédente : les agents sont entraînés sur une documentation écrite pour des humains utilisant des interfaces humaines. Mais Chrome DevTools pour les agents, c’est une interface différente avec des patterns d’interaction différents. La documentation doit changer aussi.

« Quand vous pensez au débogage de performance dans la documentation, vous diriez : allez dans le panneau Performance, faites une trace de performance, puis regardez ce flame graph particulier », a expliqué Michael. « Pour DevTools destiné aux agents, ce serait : allez sur cette page, démarrez une trace, choisissez cette insight particulière, peut-être exécutez evaluate_script pour mieux comprendre ce qui se passe. C’est une façon différente d’interagir avec les outils. »

Si vous installez Chrome DevTools MCP comme plugin Claude Code ou extension Gemini CLI, les skills sont enregistrées automatiquement avec les outils. L’équipe en ajoute activement pour le débogage de performance, l’audit d’accessibilité et le débogage d’extensions. Michael suit de près la proposition d’intégrer les skills dans la spécification MCP.

« Pour l’instant, ces deux technologies sont distinctes », a-t-il dit. « La perception veut qu’elles soient en concurrence, mais je pense qu’elles sont complémentaires. » Rachel-Lee a comparé les outils et les skills aux ailes et à la connaissance de voler. Les skills apprennent à l’agent comment battre des ailes, planer et piquer.

Mode CLI, débogage mémoire et débogage d’extensions dans Chrome DevTools MCP

Michael a partagé quelques points forts de Chrome DevTools MCP :

Wrapper CLI pour l’exécution de code. L’équipe construit une interface en ligne de commande qui expose les outils de Chrome DevTools MCP comme commandes CLI. Pourquoi ça compte ? Parce que les agents de code sont très bons pour écrire des scripts bash et du code Python. Plutôt que de passer un énorme snapshot d’accessibilité dans la fenêtre de contexte, un agent pourrait piper la sortie via grep et n’ajouter que les 10 % qui l’intéressent. Michael a cité le post engineering d’Anthropic sur l’exécution de code avec MCP, qui fait le même constat : laissez les agents écrire du code qui appelle des outils plutôt que de tout faire passer par l’inférence.

Débogage mémoire. Les heap snapshots arrivent maintenant, permettant aux agents d’aider à investiguer les fuites mémoire, une tâche de débogage notoirement difficile que la plupart des développeurs ne font pas assez souvent pour développer une vraie expertise. « Je pense qu’avec les agents IA, nous avons l’opportunité de rendre ça beaucoup plus accessible. »

Débogage d’extensions Chrome. Encore laborieux avec le serveur MCP, mais l’équipe en fait une fonctionnalité de premier plan. Si vous construisez des extensions Chrome avec un agent de code aujourd’hui, valider qu’elles fonctionnent est la partie difficile. Ça va bientôt devenir plus simple.

Plus de skills. Débogage mémoire, audit d’accessibilité et bien plus, dans l’objectif de guider les agents à travers des workflows difficiles à découvrir à partir des seules descriptions d’outils.

Démarrer avec Chrome DevTools MCP

Installez Chrome DevTools MCP pour Claude Code, VS Code, Gemini CLI, Cursor, Codex, Cline, JetBrains et bien d’autres en 1 à 2 lignes de code sur github.com/ChromeDevTools/chrome-devtools-mcp

Pour suivre les nouvelles fonctionnalités, consultez les notes de version Chrome DevTools (avec flux RSS) et le dépôt GitHub pour les releases. Si vous souhaitez contribuer, le projet est open source et accueille activement les demandes de fonctionnalités, rapports de bugs et pull requests.

Retrouvez Michael sur Bluesky, LinkedIn et X. Son site personnel est hablich.dev.

MCP MVP est une série vidéo d’Arcade.dev avec RL Nabors qui met en lumière les bâtisseurs qui façonnent l’écosystème agentique. Regardez l’interview complète avec Michael Hablich →

Vous voulez donner à vos agents un accès authentifié aux API sans gérer les tokens vous-même ? Découvrez comment Arcade gère OAuth pour les outils MCP.