Chrome DevTools MCP — Cas d'usage, Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

Vrai Chromium — rend la page exactement comme votre navigateur
Traces de performance avec des insights (LCP, CLS, ressources bloquant le rendu)
Accès complet à l'onglet réseau — corps des demandes/réponses, chronométrage, redirections
Snapshots DOM, captures d'écran et actions de clic/frappe/défilement
Capture des journaux de console et évaluation JS en direct dans le contexte de la page
Maintenu par l'équipe Chrome DevTools chez Google

Démo en direct

Aperçu en pratique

chrome-devtools.replay ▶ prêt

0/0

Installer

Choisissez votre client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "chrome-devtools",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  ]
}

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json

{
  "context_servers": {
    "chrome-devtools": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "chrome-devtools-mcp"
        ]
      }
    }
  }
}

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : Chrome DevTools

Diagnostiquer pourquoi une page est lente avec une trace de style Lighthouse

👤 Ingénieurs frontend et performance ⏱ ~20 min intermediate

Quand l'utiliser : Une page semble lente et vous voulez que Claude exécute une trace et identifie le vrai goulot d'étranglement au lieu de deviner.

Prérequis

L'URL cible se charge sans connexion (ou vous gérez d'abord l'authentification) — Utilisez navigate_page avec une URL ; pour les pages protégées par authentification, connectez-vous d'abord via les outils de clic/frappe chrome-devtools

Déroulement

Exécuter une trace de performance

Ouvrez https://example.com/product/123. Exécutez une trace de performance avec limitation CPU 4x et un profil réseau slow-3G. Dites-moi le LCP, CLS et TBT.✓ Copié

→ Trois nombres de métriques plus un résumé de trace
Trouver le principal coupable

Quel single asset ou script contribue le plus au délai LCP ? Montrez le chronométrage de la demande.✓ Copié

→ URL spécifique identifiée, avec décomposition du chronométrage (DNS/connexion/TTFB/téléchargement)
Proposer une correction concrète

Quelle est la correction la moins chère qui déplacerait le LCP sous 2,5s ? Proposez un changement (preconnect, preload, defer, lazy ou bundle-split) avec des lignes spécifiques à ajouter.✓ Copié

→ Diff HTML/JS exploitable, pas une liste générique

Résultat : Une régression de performance avec une cause nommée et une correction spécifique, vérifiable en réexécutant la trace après l'avoir appliquée.

Pièges

La trace varie d'une exécution à l'autre — les nombres uniques induisent en erreur — Exécutez la trace 3 fois et prenez la médiane avant de conclure quoi que ce soit
Les builds locaux/dev diffèrent de la production — Tracez une URL de production ou un aperçu servi par CDN, pas localhost sans compression

Combiner avec : filesystem · github

Vérifier que la fonctionnalité que Claude vient de coder fonctionne réellement dans un navigateur

👤 Développeurs assistés par IA fermant la boucle sur leur agent ⏱ ~10 min beginner

Quand l'utiliser : Claude vient d'éditer du code frontend. Avant de dire 'done', vous voulez qu'il ouvre la page, clique sur le bouton et confirme que cela fonctionne.

Prérequis

Serveur de développement en cours d'exécution — npm run dev dans un autre terminal ; notez l'URL

Déroulement

Ouvrir la fonctionnalité et prendre une capture d'écran

Ouvrez http://localhost:3000/new-feature. Prenez une capture d'écran. Décrivez ce que vous voyez — correspond-il à l'intention ?✓ Copié

→ Capture d'écran plus description honnête (peut signaler 'le bouton est rendu hors de l'écran')
Exercer l'interaction

Cliquez sur le bouton 'Soumettre' avec les données de test : {email: '[email protected]'}. Capturez la demande réseau qui sort et la réponse.✓ Copié

→ Entrée réseau avec réponse 200 et charge utile correspondante
Vérifier la console pour les erreurs

Y a-t-il des erreurs ou avertissements de console lors de ce flux ? Incluez les avertissements d'hydratation React ou les avertissements de clé manquante.✓ Copié

→ Console propre, ou une correction spécifique pour tout avertissement trouvé

Résultat : Une fonctionnalité auto-testée avec une capture d'écran + trace réseau comme preuve. Ferme le gap 'L'IA a écrit du code qui ne fonctionne pas réellement'.

Pièges

La capture d'écran semble bien mais l'interaction est cassée — Exercez toujours le flux utilisateur (clic/frappe), pas seulement l'inspection visuelle
HMR a une course avec la capture d'écran de Claude — Après la navigation, attendez networkidle avant d'affirmer quoi que ce soit

Combiner avec : filesystem · github

Déboguer pourquoi un appel API de votre frontend échoue

👤 Devs full-stack chassant un 4xx/5xx qui 'ne se produit pas localement' ⏱ ~15 min intermediate

Quand l'utiliser : La console du navigateur montre une récupération échouée, et vous ne faites pas confiance à votre mémoire sur les en-têtes/corps envoyés.

Déroulement

Déclencher l'appel défaillant

Ouvrez la page, effectuez l'action qui échoue. Capturez l'URL complète, la méthode, les en-têtes et le corps de la demande défaillante.✓ Copié

→ Charge utile de demande exacte visible — pas de devinage
Comparer avec attendu

Le backend attend l'en-tête X-Client-Id et un corps JSON avec le champ user_id. Qu'est-ce qui sort réellement ? Diffez-le.✓ Copié

→ Champ manquant ou incorrect spécifique identifié
Corriger et re-vérifier

Corrigez le code source afin que la demande corresponde. Ensuite, rechargez la page et confirmez que l'appel retourne maintenant 200.✓ Copié

→ L'entrée réseau finale affiche 200, pas l'erreur d'origine

Résultat : Un appel API corrigé avec une preuve d'onglet réseau qu'il fonctionne maintenant — pas plus 'fonctionne sur ma machine'.

Pièges

Les cookies de session ou le préflightage CORS masquent la demande réelle — Ne regardez pas seulement la demande défaillante — vérifiez le préflightage OPTIONS et l'historique Set-Cookie

Combiner avec : filesystem · postgres

Repérer les régressions visuelles après une refonte CSS

👤 Devs frontend effectuant des migrations de système de conception ⏱ ~20 min intermediate

Quand l'utiliser : Vous avez refactorisé CSS/tokens. Vous voulez attraper 'oh non le bouton est maintenant rose' avant de fusionner.

Déroulement

Snapshot les pages clés sur main

Sur http://localhost:3000 (branche main), captures d'écran /, /pricing, /dashboard. Enregistrez dans /tmp/visual/main/.✓ Copié

→ 3 captures d'écran enregistrées
Snapshot les mêmes pages sur votre branche

Passez à la branche 'css-refactor' et redémarrez le serveur dev. Capturez les mêmes 3 pages dans /tmp/visual/branch/.✓ Copié

→ 3 captures d'écran correspondant au chemin enregistrées
Diff et décrire

Pour chaque paire, comparez-les visuellement et décrivez tout changement. Ignorez l'anti-crénelage au niveau des pixels ; signalez tout ce qu'un designer remarquerait.✓ Copié

→ Résumé diff par page, pas 'semble pareil'

Résultat : Un diff prêt pour la revue qui attrape les changements visuels involontaires.

Pièges

Le contenu dynamique (dates, salutations aléatoires) change entre les photos — Souche du temps et figez RNG, ou recadrez ces régions

Combiner avec : filesystem · github

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

chrome-devtools + filesystem

Éditer la source → recharger la page → vérifier, dans une boucle serrée

Ouvrez localhost:3000/checkout. Le bouton de soumission du formulaire est de la mauvaise couleur. Trouvez le CSS pertinent dans src/ et corrigez-le, puis rechargez et prenez une capture d'écran pour confirmer.✓ Copié

chrome-devtools + github

Reproduire un bug d'un problème, vérifier la correction, ouvrir une PR avec une capture d'écran

Le problème #482 rapporte un bug de mise en page sur /pricing à une largeur de 375px. Reproduisez-le avec chrome-devtools (capture d'écran à 375px), corrigez le CSS, ouvrez une PR incluant les captures d'écran avant/après.✓ Copié

chrome-devtools + sentry

Reproduire une erreur utilisateur réelle trouvée dans Sentry, dans votre navigateur local

Pour le problème Sentry WEB-3a91, les breadcrumbs montrent que l'utilisateur a navigué vers /cart puis a cliqué sur 'Checkout'. Rejouez cela dans chrome-devtools et capturez ce qui casse réellement.✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler	Coût
navigate_page	url: str, wait_for?: 'load'\|'networkidle'	Démarrer n'importe quelle interaction de page	gratuit
take_screenshot	fullPage?: bool, selector?: str	Confirmation visuelle après la navigation ou l'interaction	gratuit
take_snapshot	aucun	Contenu structuré de la page sous forme de texte — mieux que les captures d'écran pour que Claude raisonne	gratuit
click	selector: str \| uid: str	Cliquez sur un élément par sélecteur CSS ou UID snapshot	gratuit
fill	selector: str, value: str	Tapez dans un champ de saisie	gratuit
evaluate_script	script: str	Exécutez du JS arbitraire dans le contexte de la page pour inspection	gratuit
list_console_messages	aucun	Lire les journaux de console et les erreurs de la page	gratuit
list_network_requests	filter?: str	Inspecter tous les XHR/fetch qui se sont produits	gratuit
get_network_request	requestId: str	Obtenez les en-têtes complets et le corps d'une demande	gratuit
performance_start_trace	reload?: bool, cpu_throttle?: number, network?: 'slow3g'\|'fast3g'	Commencez un enregistrement de performance	gratuit
performance_stop_trace	aucun	Arrêtez et analysez une trace de performance en cours d'exécution	gratuit
emulate_cpu	rate: number	Simuler les appareils lents (4x = mobile milieu de gamme)	gratuit
emulate_network	profile: 'slow3g'\|'fast3g'\|'offline'	Testez sous des réseaux limités	gratuit
new_page / close_page / select_page	divers	Gérer plusieurs onglets	gratuit

Coût et limites

Coût d'exécution

Quota d'API: Aucun — exécute un navigateur local
Tokens par appel: Les snapshots et les dumps réseau peuvent être volumineux (5-30k tokens) ; take_snapshot est généralement plus efficace en termes de tokens que les captures d'écran complètes plus dump DOM
Monétaire: Gratuit
Astuce: Préférez take_snapshot à take_screenshot pour que Claude raisonne sur la structure — les snapshots sont compacts et basés sur du texte. Enregistrez les captures d'écran pour examen humain.

Sécurité

Permissions, secrets, portée

Stockage des identifiants : Aucun au niveau MCP ; si vous vous connectez à un site lors d'une session, les cookies vivent dans le profil Chromium jusqu'à ce que vous le fermiez

Sortie de données : Chromium navigue sur le web ouvert en votre nom — les cibles reçoivent votre IP. Pas de télémétrie à Google au-delà de ce que les valeurs par défaut de Chromium envoient.

Ne jamais accorder : Ne pointez jamais vers votre vrai profil de navigateur contenant les connexions/mots de passe enregistrés

Si vous demandez à Claude de 'vous connecter au site X', il stockera un cookie de session dans le profil du navigateur. Isolez ce profil du vôtre.
Ne evaluate_script jamais de code que vous ne comprenez pas — il s'exécute dans l'origine de la page avec un accès complet.

Dépannage

Erreurs courantes et correctifs

Chromium ne se lance pas — dépendances manquantes sous Linux

Installez les libs système manquantes : sudo apt-get install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libxkbcommon0 libasound2. L'MCP inclut Chromium mais pas toutes ses dépendances runtime.

Vérifier : Exécutez `npx chrome-devtools-mcp --version` — les erreurs nomment la lib manquante

navigate_page s'écoule sur une page lente

Passez wait_for: 'load' au lieu du défaut networkidle ; ou augmentez le timeout dans la configuration MCP du client.

click échoue : élément non trouvé

Le sélecteur est obsolète ou caché. Re-appelez d'abord take_snapshot et utilisez l'UID frais du snapshot.

La trace de performance est vide

Vous devez soit recharger la page pendant la trace (reload: true), soit interagir avec elle — une onglet inactive ne produit pas de chronologie.

Alternatives

Chrome DevTools vs autres

Alternative	Quand l'utiliser	Compromis
Playwright MCP	Vous avez besoin de tests multi-navigateur (Firefox, WebKit) ou préférez la surface API de Playwright	Puissance similaire ; chrome-devtools a une traçage perf plus profond, playwright a une automation plus large
Puppeteer MCP	Vous voulez l'API Puppeteer de niveau inférieur	Chromium uniquement, chevauche beaucoup avec chrome-devtools MCP
browser-tools MCP	Vous voulez vous connecter à votre Chrome existant via l'extension DevTools Protocol	Pas de sandbox frais — utilise votre session de navigateur réelle, avec son état connecté

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills