Chrome DevTools MCP
officielServeur MCP officiel de Chrome DevTools pour contrôler et inspecter un navigateur Chrome en direct depuis des agents de codage tels que Gemini, Claude, Cursor et Copilot.
Que pouvez-vous faire avec Chrome Dev Tools MCP ?
- Enregistrer et analyser les traces de performance — démarrer une trace avec
performance_start_trace, l'arrêter avecperformance_stop_trace, puis obtenir des informations exploitables viaperformance_analyze_insight. - Inspecter l'activité réseau — lister toutes les requêtes avec
list_network_requestset récupérer les détails d'une requête individuelle avecget_network_request. - Déboguer les erreurs de console et l'état d'exécution — récupérer les messages de console via
list_console_messagesetget_console_message, ou exécuter du JavaScript arbitraire avecevaluate_script. - Automatiser les interactions du navigateur — naviguer, cliquer, remplir des formulaires et simuler des saisies à l'aide d'outils comme
navigate_page,click,filletpress_key. - Capturer l'état visuel — prendre des captures d'écran de la page avec
take_screenshotou des instantanés d'accessibilité avectake_snapshot. - Diagnostiquer les problèmes de mémoire — capturer des instantanés du tas avec
take_heapsnapshotet inspecter les reteneurs d'objets, les dominateurs, ou comparer des instantanés.
Documentation
Chrome DevTools pour les agents
Chrome DevTools pour les agents (chrome-devtools-mcp) permet à votre agent de codage (tel qu'Antigravity, Claude, Cursor ou Copilot)
de contrôler et d'inspecter un navigateur Chrome en direct. Il agit comme un serveur Model-Context-Protocol
(MCP), donnant à votre assistant de codage IA l'accès à toute la puissance de
Chrome DevTools pour une automatisation fiable, un débogage approfondi et une analyse des performances.
Une CLI est également fournie pour une utilisation sans MCP.
Référence des outils | Journal des modifications | Contribuer | Dépannage | Principes de conception
Fonctionnalités clés
- Obtenir des informations sur les performances : Utilise Chrome DevTools pour enregistrer des traces et extraire des informations exploitables sur les performances.
- Débogage avancé du navigateur : Analysez les requêtes réseau, prenez des captures d'écran et vérifiez les messages de la console du navigateur (avec des traces de pile source-mappées).
- Automatisation fiable. Utilise puppeteer pour automatiser des actions dans Chrome et attendre automatiquement les résultats des actions.
Avertissements
chrome-devtools-mcp expose le contenu de l'instance du navigateur aux clients MCP
leur permettant d'inspecter, de déboguer et de modifier toute donnée dans le navigateur ou DevTools.
Évitez de partager des informations sensibles ou personnelles que vous ne souhaitez pas partager avec
les clients MCP.
chrome-devtools-mcp prend officiellement en charge Google Chrome et Chrome for Testing uniquement.
D'autres navigateurs basés sur Chromium peuvent fonctionner, mais cela n'est pas garanti, et vous pourriez rencontrer un comportement inattendu. À utiliser à votre propre discrétion.
Nous nous engageons à fournir des correctifs et un support pour la dernière version de Extended Stable Chrome.
Les outils de performance peuvent envoyer des URL de trace à l'API Google CrUX pour récupérer des données d'expérience utilisateur réelle.
Cela aide à fournir une image holistique des performances en
présentant des données de terrain aux côtés des données de laboratoire. Ces données sont collectées par le Chrome
User Experience Report (CrUX). Pour désactiver
cela, exécutez avec le drapeau --no-performance-crux.
Statistiques d'utilisation
Google collecte des statistiques d'utilisation (telles que les taux de réussite des invocations d'outils, la latence et les informations sur l'environnement) pour améliorer la fiabilité et les performances de Chrome DevTools MCP.
La collecte de données est activée par défaut. Vous pouvez vous désinscrire en passant le drapeau --no-usage-statistics lors du démarrage du serveur :
"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]
Google traite ces données conformément à la Politique de confidentialité de Google.
La collecte de statistiques d'utilisation par Google pour Chrome DevTools MCP est indépendante des statistiques d'utilisation du navigateur Chrome. Se désinscrire des métriques Chrome ne vous désinscrit pas automatiquement de cet outil, et vice-versa.
La collecte est désactivée si les variables d'environnement CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS ou CI sont définies.
Vérifications de mise à jour
Par défaut, le serveur vérifie périodiquement le registre npm pour les mises à jour et enregistre une notification lorsqu'une version plus récente est disponible.
Vous pouvez désactiver ces vérifications de mise à jour en définissant la variable d'environnement CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS.
Prérequis
Pour commencer
Ajoutez la configuration suivante à votre client MCP :
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
[!NOTE] Utiliser
chrome-devtools-mcp@latestgarantit que votre client MCP utilisera toujours la dernière version du serveur Chrome DevTools MCP.
Si vous êtes intéressé par des tâches de navigateur de base uniquement, utilisez le mode --slim :
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
}
}
}
Voir Référence des outils Slim.
Configuration du client MCP
Amp
Suivez https://ampcode.com/manual#mcp et utilisez la configuration fournie ci-dessus. Vous pouvez également installer le serveur Chrome DevTools MCP en utilisant la CLI :amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Antigravity
Pour utiliser le serveur Chrome DevTools MCP, suivez les instructions de la documentation d'Antigravity pour installer un serveur MCP personnalisé. Ajoutez la configuration suivante à la configuration des serveurs MCP :
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--browser-url=http://127.0.0.1:9222"
]
}
}
}
Cela permettra au serveur Chrome DevTools MCP de se connecter automatiquement au navigateur qu'Antigravity utilise. Si vous n'utilisez pas le port 9222, assurez-vous de l'ajuster en conséquence.
Chrome DevTools MCP ne démarrera pas l'instance du navigateur automatiquement avec cette approche car le serveur Chrome DevTools MCP se connecte au navigateur intégré d'Antigravity. Si le navigateur n'est pas déjà en cours d'exécution, vous devez d'abord le démarrer en cliquant sur l'icône Chrome dans le coin supérieur droit.
Claude Code
Installer via CLI (MCP uniquement)
Utilisez la CLI Claude Code pour ajouter le serveur Chrome DevTools MCP (guide) :
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
Installer en tant que Plugin (MCP + Compétences)
[!NOTE] Si vous aviez déjà installé Chrome DevTools MCP précédemment pour Claude Code, assurez-vous de le supprimer d'abord de vos fichiers d'installation et de configuration.
Pour installer Chrome DevTools MCP avec les compétences, ajoutez le registre marketplace dans Claude Code :
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
Ensuite, installez le plugin :
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
Redémarrez Claude Code pour que le serveur MCP et les compétences se chargent (vérifiez avec /skills).
[!TIP] Si l'installation du plugin échoue avec une erreur
Failed to clone repository(par exemple, des problèmes de connectivité HTTPS derrière un pare-feu d'entreprise), consultez le guide de dépannage pour des solutions de contournement, ou utilisez plutôt la méthode d'installation CLI ci-dessus.
Cline
Suivez https://docs.cline.bot/mcp/configuring-mcp-servers et utilisez la configuration fournie ci-dessus.Codex
Suivez le guide de configuration MCP en utilisant la configuration standard ci-dessus. Vous pouvez également installer le serveur Chrome DevTools MCP en utilisant la CLI Codex :codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Sur Windows 11
Configurez l'emplacement d'installation de Chrome et augmentez le délai de démarrage en mettant à jour .codex/config.toml et en ajoutant les paramètres env et startup_timeout_ms suivants :
[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
Command Code
Utilisez la CLI Command Code pour ajouter le serveur Chrome DevTools MCP (guide MCP) :
cmd mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
Copilot CLI
Démarrez Copilot CLI :
copilot
Démarrez le dialogue pour ajouter un nouveau serveur MCP en exécutant :
/mcp add
Configurez les champs suivants et appuyez sur CTRL+S pour enregistrer la configuration :
- Nom du serveur :
chrome-devtools - Type de serveur :
[1] Local - Commande :
npx -y chrome-devtools-mcp@latest
Copilot / VS Code
Installer en tant que Plugin (Recommandé)
Le moyen le plus simple de démarrer est d'installer chrome-devtools-mcp en tant que plugin d'agent.
Cela regroupe le serveur MCP et toutes les compétences ensemble, afin que votre agent dispose à la fois des outils
et des conseils d'expert nécessaires pour les utiliser efficacement.
- Ouvrez la Palette de commandes (
Cmd+Shift+Psur macOS ouCtrl+Shift+Psur Windows/Linux). - Recherchez et exécutez la commande Chat: Install Plugin From Source.
- Collez le nom de notre dépôt :
ChromeDevTools/chrome-devtools-mcp.
C'est tout ! Votre agent est maintenant boosté avec les capacités de Chrome DevTools.
Installer en tant que serveur MCP (MCP uniquement)
Cliquez sur le bouton pour installer :
Ou installez manuellement :
Suivez le guide de configuration MCP de VS Code en utilisant la configuration standard ci-dessus, ou utilisez la CLI :
Pour macOS et Linux :
code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'
Pour Windows (PowerShell) :
code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'
Cursor
Cliquez sur le bouton pour installer :
Ou installez manuellement :
Allez dans Cursor Settings -> MCP -> New MCP Server. Utilisez la configuration fournie ci-dessus.
Factory CLI
Utilisez la CLI Factory pour ajouter le serveur Chrome DevTools MCP (guide) :droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest"
Gemini CLI
Installez le serveur Chrome DevTools MCP en utilisant la CLI Gemini.À l'échelle du projet :
# Either MCP only:
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
# Or as a Gemini extension (MCP+Skills):
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Globalement :
gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest
Alternativement, suivez le guide MCP et utilisez la configuration standard ci-dessus.
Gemini Code Assist
Suivez le guide de configuration MCP en utilisant la configuration standard ci-dessus.Grok Build CLI
grok mcp add chrome-devtools npx chrome-devtools-mcp@latest
Voir la documentation pour plus d'options
JetBrains AI Assistant & Junie
Allez dans Settings | Tools | AI Assistant | Model Context Protocol (MCP) -> Add. Utilisez la configuration fournie ci-dessus.
De la même manière, chrome-devtools-mcp peut être configuré pour JetBrains Junie dans Settings | Tools | Junie | MCP Settings -> Add. Utilisez la configuration fournie ci-dessus.
Kiro
Dans Paramètres Kiro, allez dans Configure MCP > Open Workspace or User MCP Config > Utilisez l'extrait de configuration fourni ci-dessus.
Ou, depuis la Barre d'activités de l'IDE > Kiro > MCP Servers > Click Open MCP Config. Utilisez l'extrait de configuration fourni ci-dessus.
Katalon Studio
Le serveur Chrome DevTools MCP peut être utilisé avec Katalon StudioAssist via un proxy MCP.
Étape 1 : Installez le proxy MCP en suivant le guide de configuration du proxy MCP.
Étape 2 : Démarrez le serveur Chrome DevTools MCP avec le proxy :
mcp-proxy --transport streamablehttp --port 8080 -- npx -y chrome-devtools-mcp@latest
Remarque : Vous devrez peut-être choisir un autre port si 8080 est déjà utilisé.
Étape 3 : Dans Katalon Studio, ajoutez le serveur à StudioAssist avec les paramètres suivants :
- URL de connexion :
http://127.0.0.1:8080/mcp - Type de transport :
HTTP
Une fois connecté, les outils Chrome DevTools MCP seront disponibles dans StudioAssist.
Mistral Vibe
Ajoutez dans ~/.vibe/config.toml :
[[mcp_servers]]
name = "chrome-devtools"
transport = "stdio"
command = "npx"
args = ["chrome-devtools-mcp@latest"]
OpenCode
Ajoutez la configuration suivante à votre fichier opencode.json. Si vous n'en avez pas, créez-le à ~/.config/opencode/opencode.json (guide) :
{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"chrome-devtools": {
"type": "local",
"command": ["npx", "-y", "chrome-devtools-mcp@latest"]
}
}
}
Qoder
Dans Paramètres Qoder, allez dans MCP Server > + Add > Utilisez l'extrait de configuration fourni ci-dessus.
Alternativement, suivez le guide MCP et utilisez la configuration standard ci-dessus.
Qoder CLI
Installez le serveur Chrome DevTools MCP en utilisant la CLI Qoder (guide) :
À l'échelle du projet :
qodercli mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Globalement :
qodercli mcp add -s user chrome-devtools -- npx chrome-devtools-mcp@latest
Warp
Allez dans Settings | AI | Manage MCP Servers -> + Add pour ajouter un serveur MCP. Utilisez la configuration fournie ci-dessus.
Windsurf
Suivez le guide de configuration MCP en utilisant la configuration standard ci-dessus.Saisissez l’invite suivante dans votre client MCP pour vérifier que tout fonctionne :
Check the performance of https://developers.chrome.com
Votre client MCP devrait ouvrir le navigateur et enregistrer une trace de performance.
[!NOTE] Le serveur MCP démarrera automatiquement le navigateur dès que le client MCP utilisera un outil nécessitant une instance de navigateur en cours d’exécution. La simple connexion au serveur Chrome DevTools MCP ne démarrera pas automatiquement le navigateur.
Outils
Si vous rencontrez des problèmes, consultez notre guide de dépannage.
- Automatisation des saisies (10 outils)
- Automatisation de la navigation (6 outils)
- Émulation (2 outils)
- Performance (3 outils)
- Réseau (2 outils)
- Débogage (8 outils)
- Mémoire (12 outils)
take_heapsnapshotclose_heapsnapshotcompare_heapsnapshotsget_heapsnapshot_class_nodesget_heapsnapshot_detailsget_heapsnapshot_dominatorsget_heapsnapshot_duplicate_stringsget_heapsnapshot_edgesget_heapsnapshot_object_detailsget_heapsnapshot_retainersget_heapsnapshot_retaining_pathsget_heapsnapshot_summary
- Extensions (5 outils)
- Tiers (2 outils)
- WebMCP (2 outils)
Configuration
Le serveur Chrome DevTools MCP prend en charge l’option de configuration suivante :
-
--autoConnect/--auto-connectSi spécifié, se connecte automatiquement à un navigateur (Chrome 144+) exécuté localement à partir du répertoire de données utilisateur identifié par le paramètre de canal (le canal par défaut est stable). Nécessite que le serveur de débogage à distance soit démarré dans l’instance Chrome via chrome://inspect/#remote-debugging.- Type : booléen
- Par défaut :
false
-
--browserUrl/--browser-url,-uSe connecter à une instance Chrome en cours d’exécution et débogable (par ex.http://127.0.0.1:9222). Pour plus de détails, voir : https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance.- Type : chaîne
- Par défaut :
false
-
--wsEndpoint/--ws-endpoint,-wPoint de terminaison WebSocket pour se connecter à une instance Chrome en cours d’exécution (par ex., ws://127.0.0.1:9222/devtools/browser/). Alternative à --browserUrl.- Type : chaîne
- Par défaut :
false
-
--wsHeaders/--ws-headersEn-têtes personnalisés pour la connexion WebSocket au format JSON (par ex., '{"Authorization":"Bearer token"}'). Fonctionne uniquement avec --wsEndpoint.- Type : chaîne
- Par défaut :
false
-
--headlessIndique s’il faut exécuter en mode headless (sans interface utilisateur).- Type : booléen
- Par défaut :
false
-
--executablePath/--executable-path,-eChemin vers l’exécutable Chrome personnalisé.- Type : chaîne
- Par défaut :
false
-
--isolatedSi spécifié, crée un répertoire de données utilisateur temporaire qui est automatiquement nettoyé après la fermeture du navigateur. Par défaut, false.- Type : booléen
- Par défaut :
false
-
--userDataDir/--user-data-dirChemin vers le répertoire de données utilisateur pour Chrome. La valeur par défaut est $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE- Type : chaîne
- Par défaut :
false
-
--channelSpécifie un canal Chrome différent à utiliser. La valeur par défaut est la version du canal stable.- Type : chaîne
- Choix :
canary,dev,beta,stable - Par défaut :
false
-
--logFile/--log-fileChemin vers un fichier pour écrire les journaux de débogage. Définissez la variable d’environnementDEBUGsur*pour activer les journaux détaillés. Utile pour soumettre des rapports de bogues.- Type : chaîne
- Par défaut :
false
-
--viewportTaille initiale de la fenêtre d’affichage pour les instances Chrome démarrées par le serveur. Par exemple,1280x720. En mode headless, la taille maximale est de 3840x2160px.- Type : chaîne
- Par défaut :
false
-
--proxyServer/--proxy-serverConfiguration du serveur proxy pour Chrome, passée comme --proxy-server lors du lancement du navigateur. Voir https://www.chromium.org/developers/design-documents/network-settings/ pour plus de détails.- Type : chaîne
- Par défaut :
false
-
--acceptInsecureCerts/--accept-insecure-certsSi activé, ignore les erreurs relatives aux certificats auto-signés et expirés. À utiliser avec prudence.- Type : booléen
- Par défaut :
false
-
--experimentalPageIdRouting/--experimental-page-id-routingIndique s’il faut exposer le pageId sur les outils limités à la page et acheminer les requêtes par ID de page (utile pour les sessions d’agent simultanées).- Type : booléen
- Par défaut :
false
-
--experimentalDevtools/--experimental-devtoolsIndique s’il faut activer l’automatisation sur les cibles DevTools- Type : booléen
- Par défaut :
false
-
--experimentalVision/--experimental-visionIndique s’il faut activer les outils basés sur les coordonnées tels que click_at(x,y). Nécessite généralement un modèle d’utilisation informatique capable de produire des coordonnées précises en regardant des captures d’écran.- Type : booléen
- Par défaut :
false
-
--memoryDebugging/--memory-debugging,-experimentalMemoryIndique s’il faut activer les outils de débogage mémoire.- Type : booléen
- Par défaut :
false
-
--experimentalStructuredContent/--experimental-structured-contentIndique s’il faut produire un contenu formaté structuré.- Type : booléen
- Par défaut :
false
-
--experimentalIncludeAllPages/--experimental-include-all-pagesIndique s’il faut inclure tous les types de pages, comme les webviews ou les pages d’arrière-plan, en tant que pages.- Type : booléen
- Par défaut :
false
-
--experimentalScreencast/--experimental-screencastExpose les outils expérimentaux de screencast (nécessite ffmpeg). Installez ffmpeg https://www.ffmpeg.org/download.html et assurez-vous qu’il est disponible dans le PATH du serveur MCP.- Type : booléen
- Par défaut :
false
-
--experimentalFfmpegPath/--experimental-ffmpeg-pathChemin vers l’exécutable ffmpeg pour l’enregistrement screencast.- Type : chaîne
- Par défaut :
false
-
--categoryExperimentalWebmcp/--category-experimental-webmcpDéfinir sur true pour activer le débogage des outils WebMCP. Nécessite Chrome 149+ avec les indicateurs suivants :--enable-features=WebMCP,DevToolsWebMCPSupport- Type : booléen
- Par défaut :
false
-
--chromeArg/--chrome-argArguments supplémentaires pour Chrome. S’applique uniquement lorsque Chrome est lancé par chrome-devtools-mcp.- Type : tableau
- Par défaut :
false
-
--blockedUrlPattern/--blocked-url-patternRestreint l’accès réseau du navigateur en bloquant les modèles d’URL spécifiés (utilise https://urlpattern.spec.whatwg.org/). Se détache silencieusement des cibles avec des URL bloquées lors de la connexion et bloque les requêtes d’exécution (y compris les navigations et les sous-ressources). Accepte un tableau de modèles.- Type : tableau
- Par défaut :
false
-
--allowedUrlPattern/--allowed-url-patternRestreint l’accès réseau du navigateur en autorisant uniquement les modèles d’URL spécifiés (utilise https://urlpattern.spec.whatwg.org/). Nécessite Chrome 149+. Se détache silencieusement des cibles avec des URL non autorisées lors de la connexion et bloque les requêtes d’exécution (y compris les navigations et les sous-ressources). Accepte un tableau de modèles.- Type : tableau
- Par défaut :
false
-
--ignoreDefaultChromeArg/--ignore-default-chrome-argDésactive explicitement les arguments par défaut pour Chrome. S’applique uniquement lorsque Chrome est lancé par chrome-devtools-mcp.- Type : tableau
- Par défaut :
false
-
--categoryEmulation/--category-emulationDéfinir sur false pour exclure les outils liés à l’émulation.- Type : booléen
- Par défaut :
true
-
--categoryPerformance/--category-performanceDéfinir sur false pour exclure les outils liés à la performance.- Type : booléen
- Par défaut :
true
-
--categoryNetwork/--category-networkDéfinir sur false pour exclure les outils liés au réseau.- Type : booléen
- Par défaut :
true
-
--categoryExtensions/--category-extensionsDéfinir sur true pour inclure les outils liés aux extensions. Remarque : Cette fonctionnalité n’est actuellement prise en charge qu’avec une connexion par tube. autoConnect, browserUrl et wsEndpoint ne sont pas pris en charge avec cette fonctionnalité jusqu’à la sortie de la version 149.- Type : booléen
- Par défaut :
false
-
--categoryExperimentalThirdParty/--category-experimental-third-partyDéfinir sur true pour activer les outils de développement tiers exposés par la page inspectée elle-même- Type : booléen
- Par défaut :
false
-
--performanceCrux/--performance-cruxDéfinir sur false pour désactiver l’envoi des URL des traces de performance à l’API CrUX afin d’obtenir des données de performance terrain.- Type : booléen
- Par défaut :
true
-
--usageStatistics/--usage-statisticsDéfinir sur false pour refuser la collecte de statistiques d’utilisation. Google collecte des données d’utilisation pour améliorer l’outil, traitées conformément à la politique de confidentialité de Google (https://policies.google.com/privacy). Ceci est indépendant des métriques du navigateur Chrome. Désactivé si les variables d’environnementCHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICSouCIsont définies.- Type : booléen
- Par défaut :
true
-
--screenshotFormat/--screenshot-formatRemplace le format de sortie par défaut utilisé par take_screenshot lorsque l’appelant n’en spécifie pas. JPEG et WebP sont environ 3 à 5 fois plus petits que PNG, ce qui aide à réduire la taille du contexte dans les conversations IA. Non défini conserve la valeur par défaut existante ("png").- Type : chaîne
- Choix :
jpeg,png,webp - Par défaut :
false
-
--screenshotQuality/--screenshot-qualityRemplace la qualité de compression par défaut (0-100) utilisée par take_screenshot pour JPEG et WebP lorsque l’appelant n’en spécifie pas. Des valeurs plus basses signifient des fichiers plus petits. Ignoré pour PNG. Non défini conserve la valeur par défaut de Puppeteer.- Type : nombre
- Par défaut :
false
-
--screenshotMaxWidth/--screenshot-max-widthLargeur maximale en pixels pour les captures d’écran. Si l’image capturée est plus large, elle est réduite (en conservant le rapport d’aspect) avant d’être renvoyée. Réduit la taille du contexte dans les conversations IA. Non défini signifie aucun redimensionnement.- Type : nombre
- Par défaut :
false
-
--screenshotMaxHeight/--screenshot-max-heightHauteur maximale en pixels pour les captures d'écran. Si l'image capturée est plus haute, elle est réduite (en conservant le ratio d'aspect) avant d'être renvoyée. Peut être combiné avec --screenshot-max-width ; le plus petit facteur d'échelle l'emporte. Non défini signifie aucun redimensionnement.- Type : number
- Par défaut :
false
-
--slimExpose un ensemble « allégé » de 3 outils couvrant uniquement la navigation, l'exécution de scripts et les captures d'écran. Utile pour les tâches de base du navigateur.- Type : boolean
- Par défaut :
false
-
--redactNetworkHeaders/--redact-network-headersSi vrai, masque certains en-têtes réseau considérés comme sensibles avant de les renvoyer au client.- Type : boolean
- Par défaut :
false
-
--allowUnrestrictedPaths/--allow-unrestricted-pathsSi défini, désactive la restriction de chemin par défaut qui s'applique lorsque le client MCP ne négocie pas la capacité « roots ». Par défaut, les outils d'écriture de fichiers sont limités au répertoire temporaire du système d'exploitation lorsqu'aucune racine n'est configurée. Utilisez ceci uniquement lors de la connexion d'un client local de confiance qui n'implémente pas les racines MCP et nécessite un accès à des chemins en dehors du répertoire temporaire.- Type : boolean
- Par défaut :
false
Passez-les via la propriété args dans la configuration JSON. Par exemple :
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--channel=canary",
"--headless=true",
"--isolated=true"
]
}
}
}
Connexion via WebSocket avec des en-têtes personnalisés
Vous pouvez vous connecter directement à un point de terminaison WebSocket Chrome et inclure des en-têtes personnalisés (par exemple, pour l'authentification) :
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>",
"--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
]
}
}
}
Pour obtenir le point de terminaison WebSocket d'une instance Chrome en cours d'exécution, visitez http://127.0.0.1:9222/json/version et recherchez le champ webSocketDebuggerUrl.
Vous pouvez également exécuter npx chrome-devtools-mcp@latest --help pour voir toutes les options de configuration disponibles.
Concepts
Sessions simultanées
La plupart des clients MCP démarrent un serveur Chrome DevTools MCP par conversation. Si votre client partage une seule instance de serveur entre des agents ou sous-agents simultanés, démarrez le serveur avec --experimentalPageIdRouting. Cela expose pageId sur les outils à portée de page afin que chaque agent puisse acheminer les appels d'outils vers l'onglet avec lequel il travaille.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--experimentalPageIdRouting"
]
}
}
}
Si vous exécutez plusieurs sessions client MCP indépendantes et souhaitez que chaque session lance son propre profil Chrome temporaire, passez également --isolated. Cela évite de partager le répertoire de données utilisateur Chrome DevTools MCP par défaut entre ces instances de serveur.
Répertoire de données utilisateur
chrome-devtools-mcp démarre une instance du canal stable de Chrome en utilisant le répertoire de données utilisateur suivant :
- Linux / macOS :
$HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL - Windows :
%HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
Le répertoire de données utilisateur n'est pas effacé entre les exécutions et est partagé entre toutes les instances de chrome-devtools-mcp. Définissez l'option isolated sur true pour utiliser à la place un répertoire de données utilisateur temporaire qui sera automatiquement effacé après la fermeture du navigateur.
Connexion à une instance Chrome en cours d'exécution
Par défaut, le serveur Chrome DevTools MCP démarre une nouvelle instance Chrome avec un profil dédié. Cela peut ne pas être idéal dans toutes les situations :
- Si vous souhaitez conserver le même état d'application lorsque vous alternez entre les tests manuels du site et les tests pilotés par agent.
- Lorsque le MCP doit se connecter à un site Web. Certains comptes peuvent empêcher la connexion lorsque le navigateur est contrôlé via WebDriver (le mécanisme de lancement par défaut du serveur Chrome DevTools MCP).
- Si vous exécutez votre LLM dans un environnement sandbox, mais que vous souhaitez vous connecter à une instance Chrome qui s'exécute en dehors du sandbox.
Dans ces cas, démarrez Chrome d'abord et laissez le serveur Chrome DevTools MCP s'y connecter. Il y a deux façons de le faire :
- Connexion automatique (disponible dans Chrome 144) : idéal pour partager l'état entre les tests manuels et pilotés par agent.
- Connexion manuelle via le port de débogage distant : idéal lors de l'exécution dans un environnement sandbox.
Connexion automatique à une instance Chrome en cours d'exécution
Étape 1 : Configurer le débogage distant dans Chrome
Dans Chrome (>= M144), procédez comme suit pour configurer le débogage distant :
- Accédez à
chrome://inspect/#remote-debuggingpour activer le débogage distant. - Suivez l'interface de dialogue pour autoriser ou refuser les connexions de débogage entrantes.
Étape 2 : Configurer le serveur Chrome DevTools MCP pour qu'il se connecte automatiquement à une instance Chrome en cours d'exécution
Pour connecter le serveur chrome-devtools-mcp à l'instance Chrome en cours d'exécution, utilisez l'argument de ligne de commande --autoConnect pour le serveur MCP.
L'extrait de code suivant est un exemple de configuration pour gemini-cli :
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest", "--autoConnect"]
}
}
}
Étape 3 : Tester votre configuration
Assurez-vous que votre navigateur est en cours d'exécution. Ouvrez gemini-cli et exécutez l'invite suivante :
Check the performance of https://developers.chrome.com
[!REMARQUE] L'option
autoConnectnécessite que l'utilisateur démarre Chrome. Si l'utilisateur a plusieurs profils actifs, le serveur MCP se connectera au profil par défaut (tel que déterminé par Chrome). Le serveur MCP a accès à toutes les fenêtres ouvertes pour le profil sélectionné.
Le serveur Chrome DevTools MCP essaiera de se connecter à votre instance Chrome en cours d'exécution. Il affiche une boîte de dialogue demandant l'autorisation de l'utilisateur.
Cliquer sur Autoriser amène le serveur Chrome DevTools MCP à ouvrir developers.chrome.com et à prendre une trace de performance.
Connexion manuelle via le transfert de port
Vous pouvez vous connecter à une instance Chrome en cours d'exécution en utilisant l'option --browser-url. Ceci est utile si vous exécutez le serveur MCP dans un environnement sandbox qui ne permet pas de démarrer une nouvelle instance Chrome.
Voici un guide étape par étape sur la façon de se connecter à une instance Chrome en cours d'exécution :
Étape 1 : Configurer le client MCP
Ajoutez l'option --browser-url à la configuration de votre client MCP. La valeur de cette option doit être l'URL de l'instance Chrome en cours d'exécution. http://127.0.0.1:9222 est une valeur par défaut courante.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--browser-url=http://127.0.0.1:9222"
]
}
}
}
Étape 2 : Démarrer le navigateur Chrome
[!AVERTISSEMENT] L'activation du port de débogage distant ouvre un port de débogage sur l'instance de navigateur en cours d'exécution. Toute application sur votre machine peut se connecter à ce port et contrôler le navigateur. Assurez-vous de ne pas naviguer sur des sites Web sensibles lorsque le port de débogage est ouvert.
Démarrez le navigateur Chrome avec le port de débogage distant activé. Assurez-vous de fermer toutes les instances Chrome en cours d'exécution avant d'en démarrer une nouvelle avec le port de débogage activé. Le numéro de port que vous choisissez doit être le même que celui que vous avez spécifié dans l'option --browser-url de la configuration de votre client MCP.
Pour des raisons de sécurité, Chrome vous oblige à utiliser un répertoire de données utilisateur non par défaut lors de l'activation du port de débogage distant. Vous pouvez spécifier un répertoire personnalisé à l'aide de l'indicateur --user-data-dir. Cela garantit que votre profil de navigation habituel et vos données ne sont pas exposés à la session de débogage.
macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable
Linux
/usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable
Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"
Étape 3 : Tester votre configuration
Après avoir configuré le client MCP et démarré le navigateur Chrome, vous pouvez tester votre configuration en exécutant une invite simple dans votre client MCP :
Check the performance of https://developers.chrome.com
Votre client MCP doit se connecter à l'instance Chrome en cours d'exécution et recevoir un rapport de performance.
Si vous rencontrez des problèmes de transfert de port VM-hôte, consultez la section « Le débogage distant entre la machine virtuelle (VM) et l'hôte échoue » dans docs/troubleshooting.md.
Pour plus de détails sur le débogage distant, consultez la documentation Chrome DevTools.
Débogage de Chrome sur Android
Veuillez consulter ces instructions.
Limitations connues
Voir Dépannage.
Intégration en tant que sous-agent de navigateur
Si vous développez des outils agentiques et souhaitez fournir un sous-agent de navigateur intégré dans le cadre de votre produit, nous vous recommandons de vous appuyer sur Chrome DevTools pour les agents.
Pour une implémentation de référence, consultez la documentation de l'agent de navigateur Gemini CLI.