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 pour les développeurs 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 protocole Model Context Open Source.
- CLI des outils pour les développeurs Chrome : interface permettant d'interagir avec le navigateur directement depuis votre terminal.
- Compétences agentives : instructions d'expert qui expliquent à votre agent comment 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 pour les développeurs Chrome pour les agents afin d'aider votre agent de codage à 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 codage (tel que Gemini, Claude, Cursor ou Copilot). Notez que, bien que les outils pour les développeurs Chrome pour les agents fournissent la suite complète d'outils, la CLI n'accepte 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 qui prennent en charge le protocole MCP. Cela inclut Antigravity, Gemini CLI, Claude Code, Cursor, Copilot, etc.
Points à noter concernant la sécurité
Étant donné que votre agent pourra afficher les pages auxquelles il accède et interagir avec elles, il peut agir 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 partager avec des agents.
Prérequis
Avant d'installer les outils pour les développeurs Chrome pour les agents, assurez-vous que votre environnement répond aux exigences suivantes :
Pour configurer les outils pour les développeurs Chrome pour les agents, choisissez la méthode qui correspond à votre environnement de codage préféré. Certains agents nécessitent une installation manuelle, tandis que d'autres sont pré-intégrés aux outils.
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.
Installer à l'aide de la CLI
Pour configurer les outils pour les développeurs Chrome pour les agents, vous pouvez utiliser un fichier de configuration JSON ou une commande CLI pour installer directement le serveur 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, des instructions d'expert qui aident votre agent à utiliser les fonctionnalités des outils pour les développeurs.
Si votre agent ne figure pas dans la liste, vous pouvez découvrir comment l'installer dans le dépôt GitHub des outils pour les développeurs Chrome pour les agents.
Pour ajouter les outils pour les développeurs 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 avec 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 de la configuration JSON
Pour les autres agents qui prennent en charge la clé de configuration mcpServers, ajoutez manuellement cette entrée et veillez à 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 ne figure pas dans la liste, consultez le dépôt GitHub MCP des outils pour les développeurs Chrome.
Tester votre configuration
Saisissez l'invite suivante dans votre agent pour vérifier que tout fonctionne :
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 les 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 aussi ê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.
Configuration avancée
Voici d'autres façons pour votre agent d'accéder au navigateur.
Configurer le mode headless
Si vous souhaitez effectuer des tâches en arrière-plan sans fenêtre de navigateur visible, vous pouvez exécuter Chrome en mode headless (sans interface utilisateur). Ajoutez l'option --headless aux arguments de votre serveur :
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless"
]
}
}
}
Se connecter à une session de navigateur existante
Par défaut, les outils de développement pour les agents démarrent une nouvelle instance Chrome. Toutefois, vous pouvez connecter votre agent à une session de navigateur existante à l'aide de l'option --autoConnect. Cela est particulièrement utile si votre agent doit examiner un problème qui est bloqué par une connexion ou une session que vous avez déjà démarrée.
Vous pouvez vous connecter à une session existante de deux manières :
Utiliser la connexion automatique (Chrome 144 et versions ultérieures)
Lorsque le serveur MCP des outils pour les développeurs Chrome est configuré avec l'option --autoConnect, il se connecte à une instance Chrome active et demande une session de débogage à distance.
- Dans votre navigateur Chrome en cours d'exécution, accédez à
chrome://inspect/#remote-debuggingpour activer le débogage à distance. Mettez à jour votre configuration MCP pour inclure l'option
--autoConnect:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }Envoyez une invite à votre agent. Chrome affiche une boîte de dialogue demandant l'autorisation de l'utilisateur pour autoriser la session de débogage à distance. Cliquez sur Autoriser.
Se connecter manuellement à l'aide du port de débogage à distance
Si vous ne pouvez pas utiliser --autoConnect (par exemple, si vous exécutez votre agent dans un environnement en bac à sable), vous pouvez démarrer Chrome manuellement avec un port de débogage.
Voici un exemple (sur macOS) :
Démarrez le navigateur Chrome avec le port de débogage à distance activé. Pour des raisons de sécurité, vous devez également spécifier un répertoire de données utilisateur personnalisé.
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stableConfigurez votre agent pour qu'il se connecte à l'aide du paramètre
--browser-url:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }