Les outils pour les développeurs Chrome pour les agents sont une suite d'outils qui apportent la puissance des outils pour les développeurs Chrome à vos workflows de codage d'IA. En installant les outils de développement Chrome pour les agents, vous avez accès aux éléments suivants :
- Serveur MCP : connecte votre agent d'IA à une instance de navigateur en direct à l'aide du Model Context Protocol Open Source.
- CLI des Outils pour les développeurs Chrome : interface permettant d'interagir directement avec le navigateur depuis votre terminal.
- Compétences agentiques : instructions d'expert qui apprennent à votre agent à coordonner plusieurs outils pour des tâches complexes telles que le débogage de l'accessibilité ou des performances.
Dans le contexte du développement Web, les Outils pour les développeurs Chrome pour les agents intègrent des fonctionnalités de débogage à votre agent d'IA.
Par exemple, un agent peut utiliser les outils pour enregistrer et évaluer les traces de performances afin d'analyser les performances d'un site Web et d'identifier les améliorations potentielles. Au-delà du développement Web, les outils de développement pour les agents permettent également à votre agent de parcourir le Web en direct au lieu de simplement récupérer du code HTML statique.
Configuration
Ce guide vous explique comment configurer les outils de développement Chrome pour les agents afin d'aider votre agent de programmation à contrôler et inspecter un navigateur Chrome en direct.
Utilisez le package chrome-devtools-mcp pour contrôler et inspecter un navigateur Chrome en direct à partir de votre agent de programmation (tel que Gemini, Claude, Cursor ou Copilot). Notez que, bien que les outils pour les développeurs Chrome pour les agents fournissent l'ensemble complet d'outils, la CLI ne prend en charge qu'un sous-ensemble ciblé pour l'automatisation basée sur le shell.
IDE et modèles compatibles
Les outils pour les développeurs Chrome pour les agents sont compatibles avec tous les outils ou IDE prenant en charge le protocole MCP. Cela inclut Antigravity, Gemini CLI, Claude Code, Cursor, Copilot et plus encore.
Considérations de sécurité
Comme votre agent pourra afficher les pages auxquelles il accède et interagir avec elles, il pourra agir efficacement en votre nom si vous le connectez à un navigateur avec une session active et authentifiée. Évitez de partager des informations sensibles ou personnelles que vous ne souhaitez pas communiquer aux agents.
Prérequis
Avant d'installer les outils de développement Chrome pour les agents, assurez-vous que votre environnement répond aux exigences suivantes :
Pour configurer les outils de développement Chrome pour les agents, choisissez la méthode qui correspond à votre environnement de programmation préféré. Alors que certains agents nécessitent une installation manuelle, d'autres sont fournis avec les outils préintégrés.
Antigravity
Les outils pour les développeurs Chrome pour les agents sont fournis avec Antigravity 2.0. Vous pouvez 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 d'agent spécialisées, 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 Antigravity Browser.
Installer à l'aide de la CLI
Pour configurer les outils de développement Chrome pour les agents, vous pouvez utiliser un fichier de configuration JSON ou une commande CLI pour installer le serveur directement si votre agent le prend en charge. Certains agents proposent également des extensions ou des plug-ins officiels qui incluent des compétences d'agent et des instructions d'expert qui aident votre agent à utiliser les fonctionnalités des outils de développement.
Si votre agent ne figure pas dans cette liste, vous trouverez la procédure d'installation dans le dépôt GitHub des outils de développement Chrome pour les agents.
Pour ajouter les outils de développement Chrome pour les agents à un agent de ligne de commande, utilisez les commandes CLI intégrées pour votre agent spécifique :
Gemini CLI
Installez l'extension Gemini CLI qui inclut le package MCP et les compétences associées à l'aide de la commande suivante :
# Gemini extension (MCP+Skills)
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Installez uniquement le package MCP à l'aide de la commande suivante :
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
Claude Code
Pour installer les outils pour les développeurs Chrome pour les agents en tant que plug-in Claude Code, utilisez les commandes slash 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 en savoir plus, consultez la page officielle du plug-in Claude pour les outils de développement Chrome.
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Installer à l'aide d'une configuration JSON
Pour les autres agents compatibles avec la clé de configuration mcpServers, ajoutez manuellement cette entrée et assurez-vous d'installer les outils de développement pour les agents via npm i
chrome-devtools-mcp.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
Installer dans d'autres agents
Pour configurer un agent qui n'est pas listé, consultez le dépôt GitHub MCP des outils pour les développeurs Chrome.
Tester votre configuration
Saisissez la requête suivante dans votre agent pour vérifier que tout fonctionne correctement :
Check the performance of https://developers.chrome.com
Votre agent doit ouvrir une fenêtre de navigateur et enregistrer une trace de performances.
Résoudre les problèmes de configuration
Si votre agent ne parvient pas à exécuter des outils et a accès aux compétences des outils pour les développeurs Chrome, il peut tenter de résoudre le problème automatiquement. Dans le cas contraire, vous pouvez inviter explicitement l'agent :
Use the Chrome DevTools troubleshooting skill to fix my setup.
Vous pouvez également être plus précis :
I'm having trouble with Chrome DevTools for agents. I tried to run [Tool Name]
but got the error: [Error Message]. I am on [OS Name]. Use the Chrome DevTools
troubleshooting skill to fix my setup.
Étapes suivantes
Pour personnaliser votre configuration, consultez Configuration.