Chrome DevTools (MCP) pour les agents IA

• La sortie en preview publique du serveur Chrome DevTools MCP permet désormais aux agents IA de codage d’utiliser les fonctions de débogage et de performance de Chrome DevTools
• Jusqu’ici, les agents ne pouvaient pas vérifier le résultat de l’exécution du code, mais ils peuvent maintenant exploiter des données runtime réelles comme le réseau, la console, le DOM et le traçage des performances
• Avec le serveur DevTools MCP, il devient possible d’automatiser la validation du code en temps réel, l’analyse des erreurs réseau et console, la simulation des actions utilisateur, le débogage des styles et de la mise en page et les audits automatiques de performance
• Les développeurs peuvent l’utiliser immédiatement en ajoutant le serveur à la configuration de leur client MCP, avec des prompts d’exemple pour vérifier le LCP ou diagnostiquer des erreurs de soumission de formulaire
• Google prévoit d’étendre les fonctionnalités de MCP à partir des retours de la communauté

---

Vue d’ensemble

• Google a lancé une preview publique de son nouveau serveur Chrome DevTools Model Context Protocol (MCP)
• Cela permet aux assistants IA de codage d’utiliser directement dans le navigateur les fonctions de débogage et de mesure de performance de Chrome DevTools
• Autrement dit, cela aide à résoudre une difficulté récurrente : les agents de codage ne pouvaient pas observer le comportement réel du code exécuté dans le navigateur

Présentation du Model Context Protocol (MCP)

• Le Model Context Protocol (MCP) est un standard open source destiné à connecter les grands modèles de langage (LLM) à des outils externes et à des sources de données
• Le serveur Chrome DevTools MCP exploite ce standard pour s’intégrer aux agents IA et leur donner accès à divers outils de débogage web et de traçage des performances
• Par exemple, avec l’outil performance_start_trace, un LLM peut lancer le navigateur, collecter et analyser des informations de performance, puis proposer des améliorations
• Grâce au protocole MCP, les agents de codage bénéficient ainsi d’un support plus puissant pour le développement de sites web et la résolution de problèmes
• Le fonctionnement détaillé de MCP est disponible dans la documentation officielle MCP

Principaux cas d’usage

• Validation en temps réel des modifications de code

  • Après avoir modifié du code, un agent IA peut vérifier immédiatement le comportement dans le navigateur avec Chrome DevTools MCP
  • Exemple de prompt :

    Verify in the browser that your change works as expected.  
    

• Diagnostic des erreurs réseau et console

  • Prise en charge du diagnostic automatique via l’analyse des requêtes réseau, la détection des problèmes CORS et l’inspection des logs console
  • Exemple de prompt :

    A few images on localhost:8080 are not loading. What's happening?  
    

• Simulation du comportement utilisateur

  • Aide aux tests automatisés de parcours réels dans le navigateur, comme la navigation, la saisie de formulaires ou le clic sur des boutons, ainsi qu’à la reproduction de bugs
  • Exemple de prompt :

    Why does submitting the form fail after entering an email address?  
    

• Débogage en temps réel des styles et problèmes de mise en page

  • Fourniture automatique de suggestions détaillées sur les problèmes de DOM, d’inspection CSS et de mise en page comme les débordements
  • Exemple de prompt :

    The page on localhost:8080 looks strange and off. Check what's happening there.  
    

• Automatisation des audits de performance

  • Automatisation du traçage des performances dans le navigateur et de son analyse
  • Exemple de prompt :

    Localhost:8080 is loading slowly. Make it load faster.  
    

• La liste des outils MCP disponibles est consultable dans la documentation de référence des outils

Démarrage

• Il est possible d’intégrer le serveur Chrome DevTools MCP en ajoutant la configuration suivante au client MCP

  {  
    "mcpServers": {  
      "chrome-devtools": {  
        "command": "npx",  
        "args": ["chrome-devtools-mcp@latest"]  
      }  
    }  
  }  
  

• Il est possible de vérifier son fonctionnement avec un prompt d’exemple

  Please check the LCP of web.dev.  
  

• Des informations et documents détaillés sont fournis dans la documentation Chrome DevTools MCP sur GitHub

Participation et plan d’extension

• Google prévoit de faire évoluer progressivement Chrome DevTools MCP à partir de cette sortie en preview publique
• Les futures fonctionnalités seront décidées en tenant compte des retours de la communauté
• Les avis et la participation des utilisateurs d’outils d’assistance IA au codage comme des fournisseurs d’outils de développement IA de nouvelle génération sont activement encouragés
• Les demandes d’amélioration ou les problèmes détectés peuvent être signalés via les issues GitHub

[shakespeares]

Je me demande s’il y a des cas d’usage où c’est meilleur que Playwright.
À première vue, ça laisse un peu à désirer.