Publié le 19 mai 2026
Les outils de codage basés sur l'IA sont incroyablement efficaces pour écrire du code, mais ils sont souvent déconnectés de son exécution. Ils peuvent générer une application Web complexe, mais ils ne peuvent pas observer son comportement ni inspecter sa sortie dans un navigateur en direct.
Les outils pour les développeurs Chrome pour les agents offrent à votre agent de codage la visibilité dont il a besoin pour vérifier, déboguer et optimiser le code en temps réel. Il y a quelques mois, nous l'avons présenté pour la première fois, et nous sommes ravis d'annoncer que les outils pour les développeurs Chrome pour les agents sont désormais disponibles en version stable 1.0.
Connecter votre agent au navigateur
Les outils pour les développeurs Chrome pour les agents permettent à votre agent de découvrir votre site comme le ferait un utilisateur réel. Cette version stable inclut plusieurs façons pour vous et votre agent d'interagir avec Chrome :
- Serveur MCP (Model Context Protocol) : serveur qui connecte les grands modèles de langage (LLM) aux fonctionnalités de débogage des outils pour les développeurs.
- Interface de ligne de commande (CLI) : alternative efficace en termes de jetons qui permet aux agents de regrouper des actions dans des scripts.
- Compétences de l'agent : instructions d'expert qui expliquent à votre agent comment et quand utiliser des outils spécifiques pour des tâches telles que l'accessibilité ou le débogage des performances.
Déboguer, émuler et auditer automatiquement
Avec la version 1.0, votre agent de codage peut désormais effectuer des tâches de débogage avancées qui étaient auparavant manuelles.
Automatiser les audits qualité
Votre agent peut désormais exécuter des audits Lighthouse pour évaluer la qualité du site Web . Il peut identifier les problèmes d'accessibilité, de référencement, de bonnes pratiques et de navigation par agent. C'est comme avoir un linter qui comprend le temps d'exécution. Utilisé comme porte de qualité, il transforme votre agent de codage en un expert qui détecte les bloqueurs critiques avant qu'ils n'atteignent la production.
Émuler des expériences utilisateur réelles
Votre agent peut utiliser les Outils de développement pour les agents afin de tester l'apparence et les performances d'un site sur différents appareils ou dans différents lieux à l'aide d'outils d'émulation. Il peut redimensionner les fenêtres, simuler des géolocalisations et limiter la vitesse du réseau et du processeur pour imiter les conditions réelles. Ainsi, votre agent peut tester des comportements spécifiques aux mobiles, comme les menus hamburger, sans que vous ayez à redimensionner manuellement votre navigateur.
Développer et déboguer des extensions Chrome
Vous pouvez également laisser votre agent vous aider non seulement à développer des extensions Chrome, mais aussi à les déboguer. Votre agent peut installer, recharger et déclencher directement des actions d'extension. Cela permet d'automatiser le cycle fréquent "enregistrer et actualiser" pendant le développement. Il peut également examiner les scripts d'arrière-plan et les pages d'extension pour vous aider à corriger les bugs dans des configurations de navigateur plus complexes.
Déboguer et tester les outils WebMCP
Nous apportons également une visibilité approfondie à l' WebMCP (Web Model Context Protocol) Origin Trial pour vous aider à implémenter cette nouvelle API.
Au lieu de demander à votre agent de s'appuyer sur des signaux pour déduire un plan de navigation dans le DOM, il peut interagir directement avec les outils structurés que vous exposez à l'aide de WebMCP. Cela facilite le développement, le test et le débogage de ces outils : votre agent peut les lister, les appeler par programmation et valider leur exactitude en temps réel. Cela simplifie le processus d'ajout de la prise en charge de WebMCP à votre site et de test.
Détecter et déboguer les fuites de mémoire
Nous avons également ajouté des outils dédiés à l'analyse de la mémoire. Votre agent peut désormais prendre des instantanés de tas pour identifier les fuites de mémoire, telles que les nœuds DOM détachés. En utilisant des compétences spécialisées en débogage des fuites de mémoire, l'agent agit comme un expert en performances pour vous aider à maintenir votre application légère et rapide.
Transférer des sessions avec la connexion automatique
Vous pouvez partager le contexte actuel de votre navigateur avec un agent, au lieu que l'agent ouvre sa propre instance de navigateur en bac à sable (c'est ainsi que les outils pour les développeurs pour les agents donnent généralement accès au navigateur). C'est idéal pour déboguer des éléments qui nécessitent une connexion, comme un tableau de bord authentifié, où vous souhaitez que l'agent d'IA prenne en charge l'enquête technique sans que vous ayez à tout réauthentifier.
Exposer l'état interne avec des outils de développement tiers
Les outils de développement tiers permettent à votre application Web de partager directement l'état interne et les détails des composants avec les agents d'IA. En donnant accès à des données généralement masquées de l'analyse standard, ces outils fournissent aux agents le contexte dont ils ont besoin pour comprendre une logique complexe. Cela permet d'obtenir des suggestions de débogage plus précises en fonction du comportement réel de l'application dans le navigateur.
Premiers pas
Vous pouvez installer la version stable à l'aide de npm ou la configurer directement dans l'agent de votre choix :
Antigravity
Les outils pour les développeurs Chrome pour les agents sont pré-intégrés à Antigravity 2.0. Vous pouvez commencer à l'utiliser immédiatement avec le sous-agent de navigateur. Essayez d'utiliser une commande à barre oblique, par exemple :
/browser Navigate to the Google homepage
Pour accéder aux compétences spécialisées de l'agent, nous vous recommandons d'installer le plug-in DevTools lors de l'étape Créer avec Google de la configuration initiale ou dans les paramètres de l'application. Pour en savoir plus, consultez la documentation sur le sous-agent de navigateur Antigravity.
Gemini CLI
Pour installer le package et les compétences MCP en tant qu'extension, exécutez la commande suivante :
$ gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Claude Code
Pour installer les outils pour les développeurs Chrome pour les agents en tant que plug-in Claude Code, utilisez les commandes barre oblique suivantes dans Claude Code. Ajoutez le registre Marketplace :
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
Installez ensuite le plug-in à partir du registre Marketplace :
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
Pour obtenir des guides plus détaillés et des exemples d'invites, consultez notre documentation sur les outils pour les développeurs Chrome pour les agents. Vous pouvez également explorer le code source sur GitHub.