MCP · MCP Spotlight

Serveur MCP Chrome DevTools : donner à un assistant de code les outils de débogage de Chrome

L'équipe Chrome DevTools publie un serveur MCP qui laisse un assistant IA piloter et inspecter un navigateur Chrome réel. Il s'installe en local avec une ligne de configuration. Fonction, réglages, collecte de statistiques et précautions, d'après le dépôt du projet.

Par Kayzen AI · · 3 min de lecture

Photo d'illustration : Laptop on desk book stacks (Unsplash)
Image : Laptop on desk book stacks (Unsplash) — freddie marriage fredmarriage, CC0, via Wikimedia Commons

Les DevTools sont les outils de développement intégrés à Chrome : console, onglet réseau, mesure de performance. Le serveur chrome-devtools-mcp les met à la disposition d'un assistant de code. Celui-ci peut ouvrir une page dans un vrai navigateur, lire les erreurs de la console, examiner les requêtes réseau, prendre une capture d'écran ou enregistrer une trace de performance.

Le cas d'usage est simple : l'assistant modifie le code d'un site, puis vérifie lui-même le résultat dans le navigateur au lieu de demander au développeur de le faire.

Installation

Le serveur tourne sur le poste du développeur. Le README donne cette configuration, à placer dans le fichier MCP de son client :

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

Pour Claude Code, le dépôt propose aussi une installation sous forme de plugin :

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Prérequis indiqués : une version LTS de Node.js, npm, et Chrome dans sa version stable actuelle ou plus récente. Le navigateur ne démarre pas à la connexion du serveur, seulement au premier appel d'un outil qui en a besoin.

Ce que le serveur expose

La référence des outils en compte 61, répartis en 12 catégories. Les principales :

  • Automatisation : cliquer, remplir un formulaire, naviguer, téléverser un fichier.
  • Débogage : messages de console, exécution de script, capture d'écran, audit Lighthouse.
  • Réseau : liste et détail des requêtes.
  • Performance : enregistrement et analyse de traces.
  • Mémoire : 14 outils consacrés aux instantanés du tas, pour chercher les fuites de mémoire.

Soixante et un outils, c'est beaucoup de descriptions à charger dans le contexte du modèle. L'option --slim réduit le jeu d'outils aux tâches de base. Deux autres options utiles : --headless (sans fenêtre visible) et --isolated.

Collecte de données : deux réglages à connaître

Le README signale deux envois de données activés par défaut.

  • Statistiques d'usage. Google collecte des données comme le taux de réussite des appels d'outils, les temps de réponse et des informations sur l'environnement. On s'y oppose avec l'option --no-usage-statistics ou la variable d'environnement CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS.
  • Données de performance. Les outils de performance peuvent transmettre les adresses des pages analysées à l'API CrUX de Google, pour récupérer des mesures d'utilisateurs réels. L'option --no-performance-crux coupe cet envoi.

Le serveur interroge aussi régulièrement le registre npm pour signaler les mises à jour ; la variable CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS désactive cette vérification.

Limites et sécurité

  • Le projet prévient que le serveur expose le contenu du navigateur au client MCP, qui peut l'inspecter et le modifier. Il déconseille d'y faire transiter des informations sensibles ou personnelles.
  • Seuls Google Chrome et Chrome for Testing sont officiellement pris en charge. Les autres navigateurs basés sur Chromium peuvent fonctionner, sans garantie.
  • Le README ne comporte pas de section dédiée aux limites connues. Le code est sous licence Apache-2.0.

Un point que la documentation ne développe pas : une page web contient du texte venu de l'extérieur. Un assistant qui la lit peut être influencé par des instructions qui y seraient cachées, et ce serveur lui donne en plus la main sur les clics, les formulaires et l'exécution de scripts.

Notre lecture

Pour un développeur web ou une agence, ce serveur ferme une boucle : l'assistant écrit, charge la page, lit les erreurs et corrige. C'est aussi un moyen d'obtenir un premier diagnostic de performance sans maîtriser l'onglet correspondant de Chrome.

Notre conseil : réservez-le aux sites en développement, dans un profil de navigateur séparé où vous n'êtes connecté à aucun compte client, bancaire ou administratif. Ajoutez --no-usage-statistics et --no-performance-crux si les adresses de vos projets doivent rester confidentielles, et commencez par --slim pour limiter la place prise dans le contexte. Cette fiche repose sur la documentation du projet ; nous n'avons pas testé le serveur.

Sources

  1. ChromeDevTools — chrome-devtools-mcp (README) — source primaire
  2. ChromeDevTools — référence des outils du serveur