Chrome DevTools for agents — Permettez aux agents de codage IA d'inspecter, déboguer et optimiser des pages web avec Chrome DevTools, exactement comme un développeur réel.
L'un des projets les plus populaires sur GitHub au premier semestre 2026 a été ChromeDevTools/chrome-devtools-mcp (plus de 45k étoiles). Son objectif est on ne peut plus clair : permettre à votre agent de codage IA (Claude Code, Cursor, Copilot, Codex, etc.) de contrôler directement une instance réelle de Chrome.
Il ne s'agit pas d'un simple wrapper autour de scripts Puppeteer — grâce au protocole MCP (Model Context Protocol), il expose l'intégralité des fonctionnalités DevTools aux agents IA, leur permettant d'inspecter le DOM, analyser les requêtes réseau, capturer des captures d'écran, vérifier les logs de la console, et même récupérer des données de suivi de performance.
Cet article vous guide de zéro pour comprendre ce projet, pourquoi il est important, comment le configurer et l'utiliser en pratique.
Qu'est-ce que Chrome DevTools MCP ?
Chrome DevTools MCP est un serveur MCP (Model Context Protocol) publié officiellement par l'équipe Google Chrome. Il fait le pont entre les agents de codage IA et le navigateur Chrome.
Fonctionnalités principales
| Capacité | Description |
|---|---|
| 🖥️ Débogage navigateur | Inspecter le DOM, lire le contenu de la page, capturer des captures d'écran |
| 🌐 Analyse réseau | Voir toutes les requêtes HTTP, les en-têtes de réponse et les codes de statut |
| 📊 Suivi de performance | Enregistrer des Trace, obtenir des données de performance, données utilisateur réelles CrUX |
| 💬 Inspection de la console | Lire les sorties de la console JS (y compris les stacks source-mapped) |
| ⚡ Automatisation | Automatisation navigateur fiable basée sur Puppeteer |
| 🎯 Attente intelligente | Attendre automatiquement la fin des opérations asynchrones, évitant les problèmes de timing |
Pourquoi en avons-nous besoin ?
Avant cela, les agents de codage IA manipulaient les navigateurs principalement via deux approches :
- Scripts Puppeteer/Playwright : nécessitent d'écrire manuellement du code d'automatisation, et les scripts générés par l'IA échouent souvent à cause de problèmes de timing asynchrone
- Connexion directe Chrome DevTools Protocol (CDP) : protocole complexe, l'agent IA doit « comprendre » des dizaines d'API de bas niveau
Chrome DevTools MCP encapsule toutes les fonctionnalités avancées de DevTools sous forme de tools MCP. L'agent IA n'a qu'à appeler des outils de haut niveau pour accomplir ses tâches, améliorant considérablement la fiabilité et l'efficacité.
Prérequis
Avant l'installation, assurez-vous que les environnements suivants sont prêts :
# 1. Node.js version LTS (v20 ou v22)
node -v # recommandé ≥ v20.0.0
npm -v # recommandé ≥ v10.0.0
# 2. Navigateur Chrome (version stable actuelle ou plus récente)
google-chrome --version
# 3. Un agent de codage IA compatible MCP
# Claude Code / Cursor / Copilot / Codex, etc.
Installation et configuration
Installation de base
Chrome DevTools MCP est distribué via npm, une seule ligne de commande suffit :
# Installer comme outil global
npm install -g chrome-devtools-mcp
Configuration pour Claude Code
Deux façons de l'intégrer à Claude Code :
Méthode 1 : Installation via CLI (outil MCP)
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
Méthode 2 : Installation comme plugin (MCP + Skills)
# Ajouter le registre du marketplace de plugins
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
# Installer le plugin
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
# Redémarrer Claude Code puis vérifier via /skills si le chargement est réussi
💡 Astuce : Si le pare-feu de votre entreprise empêche le clonage du plugin (
Failed to clone repository), utilisez plutôt la méthode CLI ou consultez le guide de dépannage officiel.
Configuration pour Cursor / VS Code Copilot
Ajoutez ce qui suit dans votre fichier de configuration MCP :
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
VS Code peut aussi être configuré rapidement en ligne de commande :
# macOS / Linux
code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'
# Windows PowerShell
code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'
Configuration pour OpenAI Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Les utilisateurs Windows 11 doivent configurer des variables d'environnement et un délai d'expiration supplémentaires :
# .codex/config.toml
[mcp_servers.chrome-devtools]
command = "cmd"
args = ["/c", "npx", "-y", "chrome-devtools-mcp@latest"]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000
Mode léger (Slim Mode)
Si vous n'avez besoin que des opérations de base du navigateur, utilisez le mode --slim pour réduire la consommation de ressources :
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
}
}
}
Scénarios pratiques
Scénario 1 : Débogage web automatisé par l'IA
Après configuration, demandez simplement à l'agent IA d'ouvrir une page et de l'analyser :
Vous : Ouvre https://dashen-tech.com et vérifie le chargement de la page d'accueil, y a-t-il des problèmes de performance ?
L'agent IA va : 1. Ouvrir la page via Puppeteer 2. Capturer une capture d'écran pour confirmer l'état de chargement 3. Analyser le panneau Network pour vérifier le chargement des ressources 4. Lire la sortie Console pour détecter les erreurs JS 5. Enregistrer un Trace pour analyser les Core Web Vitals
Scénario 2 : Automatisation des tests E2E
Auparavant, écrire des tests E2E nécessitait de coder manuellement des scripts Puppeteer. Maintenant, il suffit de décrire votre intention de test à l'agent IA :
Vous : Écris-moi un cas de test :
1. Ouvrir la page de connexion
2. Saisir le nom d'utilisateur et le mot de passe
3. Cliquer sur le bouton de connexion
4. Vérifier la redirection vers le dashboard
5. Vérifier l'absence de logs d'erreur
L'agent IA exécutera automatiquement ces opérations et vérifiera chaque étape via DevTools.
Scénario 3 : Analyse et optimisation des performances
C'est l'un des scénarios les plus puissants de Chrome DevTools MCP :
Vous : Analyse les performances de https://example.com et identifie le plus gros goulot d'étranglement
L'agent IA va : 1. Enregistrer un Performance Trace 2. Analyser les Long Tasks, Layout Shifts, FCP, LCP et autres métriques 3. Vérifier les données utilisateur réelles CrUX 4. Fournir des recommandations d'optimisation concrètes
Scénario 4 : Vérification de la compatibilité cross-navigateur
Vous : Ouvre cette page et vérifie s'il y a des avertissements de compatibilité dans la console,
ou des requêtes qui échouent dans le panneau Network
L'agent IA peut vérifier simultanément : - Les messages warning/error dans la Console - Les codes de statut et temps de réponse des requêtes Network - Si le rendu de la page est correct
Configuration avancée
Désactiver la collecte de données
Chrome DevTools MCP collecte par défaut des statistiques d'utilisation. Voici comment les désactiver :
# Méthode 1 : paramètre de lancement
npx chrome-devtools-mcp@latest --no-usage-statistics
# Méthode 2 : variable d'environnement
export CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1
# Méthode 3 : automatique en environnement CI (désactivé automatiquement si la variable CI existe)
Désactiver les données CrUX
L'outil de performance envoie par défaut l'URL du Trace à l'API Google CrUX pour obtenir des données utilisateur réelles :
npx chrome-devtools-mcp@latest --no-performance-crux
Désactiver la vérification des mises à jour
export CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS=1
Se connecter à une instance de navigateur existante
Si vous souhaitez que Chrome DevTools MCP se connecte à un navigateur déjà ouvert (au lieu d'en lancer un nouveau), spécifiez --browser-url :
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--browser-url=http://127.0.0.1:9222"
]
}
}
}
Attention : dans ce mode, l'instance du navigateur n'est pas lancée automatiquement. Vous devez d'abord démarrer Chrome manuellement avec le débogage distant activé (
--remote-debugging-port=9222).
Agents de codage IA compatibles
Chrome DevTools MCP prend en charge tous les principaux agents de codage IA actuels :
| Agent | Méthode d'installation | Remarques |
|---|---|---|
| Claude Code | CLI / Plugin | Plugin recommandé (inclut Skills) |
| Cursor | Configuration MCP | Fichier de configuration JSON |
| GitHub Copilot / VS Code | CLI / Plugin | Installation en un clic ou configuration manuelle |
| OpenAI Codex | CLI | Configuration supplémentaire requise sous Windows |
| Cline | Configuration MCP | Voir la documentation Cline |
| Antigravity | Configuration MCP | Connecte le navigateur intégré |
| Command Code | CLI | cmd mcp add |
| Copilot CLI | Configuration interactive | /mcp add |
| Amp | CLI / Configuration | Voir la documentation Amp |
Résumé
Chrome DevTools MCP est un projet marquant de l'ère des agents de codage IA. Il permet à l'IA de ne plus seulement « lire du code », mais de véritablement manipuler le navigateur, analyser le réseau, déboguer les performances — comme un développeur réel.
Pour un blog technique comme dashen-tech.com, cela signifie :
- ✅ Des tests E2E plus fiables : l'agent IA peut vérifier automatiquement que les pages d'articles se chargent correctement
- ✅ Monitoring de performance automatisé : enregistrer régulièrement des Trace pour surveiller l'évolution des Core Web Vitals
- ✅ Diagnostic rapide de problèmes : inspecter directement dans le navigateur les problèmes de rendu, erreurs JS, échecs de chargement de ressources
Adresse GitHub : ChromeDevTools/chrome-devtools-mcp Étoiles : 45k+ (juillet 2026) Licence : Apache-2.0 Stack technique : TypeScript + Puppeteer + Chrome DevTools Protocol
Si l'automatisation de navigateur par les agents de codage IA vous intéresse, consultez aussi nos articles précédents : Guide complet de Tabby et Comparatif d'émulateurs de terminal 2026.