Chrome DevTools MCP

• Le serveur Chrome DevTools MCP a été amélioré pour permettre aux agents de code de se connecter directement à une session de navigateur active
• Grâce à cette fonctionnalité, les agents peuvent réutiliser une session déjà connectée ou accéder à la session de débogage active de DevTools
• Dans Chrome M144 (bêta), l’option --autoConnect permet au serveur MCP de se connecter automatiquement à une instance Chrome en cours d’exécution
• À chaque connexion, une boîte de dialogue d’approbation utilisateur s’affiche, et pendant le débogage, une bannière « automated test software » indique que le navigateur est contrôlé
• Il devient possible de basculer librement entre débogage manuel et débogage assisté par IA, ce qui améliore l’efficacité du développement

---

Aperçu des améliorations du serveur Chrome DevTools MCP

• Le serveur Chrome DevTools MCP a été mis à jour pour permettre aux agents de code de se connecter directement à une session de navigateur active
  • Les utilisateurs peuvent réutiliser une session déjà connectée et déboguer sans devoir se reconnecter
  • Il est possible de demander à l’agent d’examiner un élément sélectionné dans le panneau Network ou le panneau Elements de l’interface DevTools
• Les méthodes de connexion existantes restent disponibles, avec utilisation d’un profil dédié au serveur MCP, connexion à un port de débogage distant et exécution de plusieurs instances basées sur des profils temporaires

Fonctionnement (How it works)

• Chrome M144 (actuellement en bêta) ajoute une fonction de demande de connexion de débogage à distance
  • Lorsque le serveur MCP est lancé avec l’option --autoConnect, il se connecte automatiquement à l’instance Chrome active et demande une session de débogage à distance
• Pour renforcer la sécurité, Chrome affiche une boîte de dialogue d’approbation utilisateur à chaque demande, et n’autorise la connexion qu’après validation
• Une fois la session de débogage activée, une bannière « Chrome is being controlled by automated test software » s’affiche en haut du navigateur

Prise en main (Get started)

• Pour utiliser la nouvelle fonctionnalité de débogage à distance, il faut activer le débogage à distance dans Chrome et configurer le serveur MCP

Étape 1 : configurer le débogage à distance dans Chrome

• Aller sur chrome://inspect/#remote-debugging pour activer le débogage à distance
• Choisir via la boîte de dialogue s’il faut autoriser ou non la connexion de débogage

Étape 2 : configurer la connexion automatique du serveur MCP

• Lors du lancement du serveur chrome-devtools-mcp, ajouter l’argument --autoConnect
• Exemple de configuration (gemini-cli) :

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

  • Tant que Chrome M144 n’a pas atteint le canal stable, il faut préciser --channel=beta

Étape 3 : tester la configuration

• Exécuter la commande suivante dans gemini-cli :

  Check the performance of https://developers.chrome.com
  

• Chrome affiche une boîte de dialogue demandant à l’utilisateur d’autoriser ou non la session de débogage à distance
• En cliquant sur Allow, le serveur MCP ouvre le site et exécute une analyse des performances

Débogage intégré avec les agents de code

• La connexion à une instance Chrome active permet de combiner automatisation et contrôle manuel
  • Après avoir trouvé un élément problématique dans DevTools, l’utilisateur peut transmettre cet élément à l’agent de code pour demander une correction
  • Il est également possible de faire de même dans le panneau Network en sélectionnant une requête puis en demandant à l’agent de l’analyser
• Via le serveur Chrome DevTools MCP, l’accès aux données de panneaux supplémentaires sera progressivement étendu