MCP Chrome DevTools

Serveur MCP pour connecter Claude Code aux Chrome DevTools.

Installation

# Installation globale (disponible dans tous les projets)
claude mcp add --transport stdio chrome-devtools --scope user -- npx -y chrome-devtools-mcp@0.11.0

Vérification

claude mcp list

Options d’installation

Option Description
--headless Chrome sans interface graphique
--isolated Profil temporaire avec auto-nettoyage
--channel Version Chrome : stable, beta, dev, canary
--browser-url Connexion à un Chrome existant (ex: http://127.0.0.1:9222)
--viewport Taille fenêtre (ex: 1280x720)

Exemples

# Mode headless
claude mcp add --transport stdio chrome-devtools --scope user -- npx -y chrome-devtools-mcp@0.11.0 --headless

# Profil isolé
claude mcp add --transport stdio chrome-devtools --scope user -- npx -y chrome-devtools-mcp@0.11.0 --isolated

# Connecter à Chrome existant (lancé avec --remote-debugging-port=9222)
claude mcp add --transport stdio chrome-devtools --scope user -- npx -y chrome-devtools-mcp@0.11.0 --browser-url=http://127.0.0.1:9222

Utilisation

Après installation, redémarrer Claude Code puis :

"Ouvre https://example.com et vérifie les erreurs console"
"Prends une capture d'écran de cette page"
"Inspecte l'élément sélectionné dans DevTools"
"Liste les requêtes réseau"

Fonctionnalités (v0.11.0)

  • Référence aux éléments sélectionnés dans le panneau Elements
  • Référence aux requêtes réseau dans le panneau Network
  • list_console_messages inclut les problèmes du panneau Issues
  • press_key pour déboguer les événements clavier
  • Export des snapshots d’arborescence d’accessibilité
  • Rafraîchissement de page (avec option bypass cache)
  • Support du flag --user-data-dir pour profil Chrome existant

Gestion

# Voir les détails
claude mcp get chrome-devtools

# Supprimer
claude mcp remove chrome-devtools

Scopes disponibles

Scope Stockage Usage
local (défaut) ~/.claude.json Projet actuel uniquement
user ~/.claude.json Tous les projets
project .mcp.json Partagé avec l’équipe (git)

Liens