Chrome DevTools MCP - L'outil de contrôle de navigateur pour les assistants de programmation IA

Aperçu du projet

Chrome DevTools MCP est un serveur officiel du Model Context Protocol (MCP) qui permet aux assistants de programmation IA (tels que Gemini, Claude, Cursor ou Copilot) de contrôler et d'inspecter un navigateur Chrome en temps réel. Cet outil offre aux assistants de codage IA la pleine puissance des Chrome DevTools pour une automatisation fiable, un débogage approfondi et une analyse des performances.

Adresse GitHub: https://github.com/ChromeDevTools/chrome-devtools-mcp

Fonctionnalités clés

1. Aperçus des performances

• Enregistrement des traces de performance à l'aide de Chrome DevTools
• Extraction de suggestions concrètes d'optimisation des performances
• Aide les assistants IA à identifier les goulots d'étranglement de performance

2. Débogage avancé du navigateur

• Analyse des requêtes réseau
• Capture de captures d'écran
• Inspection de la sortie de la console du navigateur
• Détection des problèmes CORS et des erreurs de console

3. Automatisation fiable

• Automatisation du navigateur basée sur Puppeteer
• Attente automatique des résultats d'opération
• Prise en charge du remplissage de formulaires, de la navigation de page, de l'interaction avec les éléments

Catégories de fonctions principales

Le serveur Chrome DevTools MCP offre 26 outils, répartis dans les catégories suivantes :

Automatisation des entrées (7 outils)

• Clics, remplissage de formulaires, saisie de texte
• Survol, opérations clavier et autres fonctions interactives

Automatisation de la navigation (7 outils)

• Navigation de page, avant/arrière
• Actualisation, attente de la fin du chargement

Fonctions de simulation (3 outils)

• Simulation d'appareil
• Simulation de géolocalisation
• Simulation des conditions réseau

Analyse des performances (3 outils)

• Enregistrement des traces de performance
• Analyse des métriques de performance
• Génération de suggestions d'optimisation

Surveillance réseau (2 outils)

• Liste des requêtes réseau
• Affichage des détails des requêtes

Outils de débogage (4 outils)

• Affichage des messages de la console
• Exécution JavaScript
• Fonction de capture d'écran
• Inspection du DOM

Configuration requise

• Node.js: 20 ou version LTS plus récente
• Chrome: Version stable actuelle ou plus récente
• npm: Gestionnaire de paquets

Installation et configuration

Configuration générale

Ajoutez le contenu suivant à votre fichier de configuration client MCP :

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

Assistants de programmation IA pris en charge

Claude Code

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Cursor

Via l'interface des paramètres de Cursor : Settings -> MCP -> New MCP Server, utilisez la configuration ci-dessus.

Gemini CLI

# Au niveau du projet
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

# Installation globale
gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

VS Code Copilot

code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'

Cline

Suivez le guide de configuration MCP de Cline en utilisant la configuration standard.

Options de configuration

Chrome DevTools MCP prend en charge les paramètres de configuration suivants :

Paramètre	Type	Valeur par défaut	Description
--headless	boolean	false	Exécuter en mode sans tête (sans interface utilisateur)
--isolated	boolean	false	Créer un répertoire de données utilisateur temporaire, nettoyé automatiquement après fermeture
--channel	string	stable	Canal de version de Chrome (stable/canary/beta/dev)
--viewport	string	-	Taille initiale de la fenêtre d'affichage, ex. 1280x720
--executablePath / -e	string	-	Chemin d'accès personnalisé à l'exécutable Chrome
--browserUrl / -u	string	-	Se connecter à une instance Chrome en cours d'exécution
--proxyServer	string	-	Configuration du serveur proxy
--acceptInsecureCerts	boolean	false	Ignorer les erreurs de certificats auto-signés et expirés (à utiliser avec prudence)
--logFile	string	-	Chemin d'accès au fichier journal de débogage

Exemple de configuration

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

Exemples d'utilisation

Test de base

Après l'installation, saisissez l'invite suivante dans votre assistant IA pour tester :

Check the performance of https://developers.chrome.com

L'assistant IA va automatiquement :

1. Ouvrir le navigateur Chrome
2. Naviguer vers le site web spécifié
3. Enregistrer une trace de performance
4. Analyser et fournir des suggestions d'optimisation des performances

Scénarios d'utilisation courants

1. Analyse des performances

Analyser les performances de chargement de example.com et fournir des suggestions d'optimisation

2. Débogage des problèmes réseau

Vérifier si my-website.com présente des erreurs CORS

3. Tests d'automatisation

Naviguer vers demo.realworld.io, remplir le formulaire de connexion et prendre une capture d'écran

4. Remplissage de formulaire

Sur la page de connexion, remplir l'e-mail test@example.com et le mot de passe testpass123

5. Inspection de la console

Afficher les messages d'erreur de la console de la page actuelle

Comment ça marche

Chrome DevTools MCP fonctionne sur la base du standard Model Context Protocol (MCP) :

1. Protocole MCP: Standard open source pour connecter les grands modèles linguistiques à des outils et sources de données externes.
2. Exposition des outils: Expose les fonctionnalités de Chrome DevTools en tant qu'outils via le protocole MCP.
3. Appel par l'IA: L'assistant IA appelle les outils pertinents en fonction des besoins de l'utilisateur.
4. Exécution automatisée: Utilise Puppeteer pour exécuter des opérations dans Chrome.
5. Retour des résultats: Renvoie les résultats de l'exécution à l'assistant IA.

Exemple de flux

Lorsque vous demandez à l'assistant IA de "vérifier les performances du site web" :

Utilisateur: Vérifier les performances de mon site web
  ↓
Assistant IA: Utilise l'outil performance_start_trace
  ↓
Serveur MCP: Lance Chrome, ouvre le site web, enregistre la trace de performance
  ↓
Assistant IA: Analyse les données de performance
  ↓
Utilisateur: Reçoit un rapport d'analyse de performance et des suggestions d'optimisation

Répertoire de données

Chrome DevTools MCP utilise les répertoires de données utilisateur suivants :

• 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 n'est pas effacé entre les exécutions, sauf si l'option --isolated est utilisée.

Considérations de sécurité

⚠️ Avertissement important:

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 les DevTools.

Veuillez éviter de partager des informations sensibles ou personnelles que vous ne souhaitez pas partager avec les clients MCP.

Dépannage

Si vous rencontrez des problèmes, veuillez consulter le guide de dépannage officiel.

Problèmes courants

1. Le navigateur ne démarre pas automatiquement: Le serveur MCP ne lance le navigateur que lorsque le client utilise des outils qui en ont besoin.
2. Problèmes de permissions de bac à sable: Si le client MCP a activé le bac à sable, il peut être nécessaire de le désactiver ou d'utiliser --connect-url pour se connecter à une instance Chrome démarrée manuellement.
3. Délai de démarrage dépassé: Sous Windows, il peut être nécessaire d'augmenter la configuration startup_timeout_ms.

Pile technologique

• Noyau: Node.js
• Automatisation du navigateur: Puppeteer
• Protocole: Chrome DevTools Protocol (CDP)
• Standard: Model Context Protocol (MCP)

Caractéristiques du projet

1. Support officiel: Développé et maintenu officiellement par l'équipe Chrome DevTools.
2. Large compatibilité: Prend en charge plusieurs assistants de programmation IA majeurs.
3. Fonctionnalités complètes: Offre 26 outils couvrant l'automatisation, le débogage et l'analyse des performances.
4. Facile à intégrer: Utilise npx sans installation locale requise, configuration simple.
5. Développement actif: Mises à jour et améliorations continues des fonctionnalités.

Scénarios d'application

• Débogage de développement web: L'assistant IA aide à identifier et corriger les bugs.
• Optimisation des performances: Analyse automatisée des performances et suggestions d'optimisation.
• Tests d'automatisation: Écriture et exécution de tests d'automatisation de navigateur.
• Surveillance de sites web: Vérification des fonctionnalités et des performances des sites web.
• Validation du développement: Vérification de l'effet réel des modifications de code dans le navigateur.

Commentaires et contributions

Ce projet est en phase de prévisualisation publique, et l'équipe Chrome DevTools recherche activement les commentaires de la communauté :

• Si vous avez des demandes de fonctionnalités ou si vous trouvez des problèmes, veuillez les soumettre sur GitHub Issues.
• Que vous soyez un développeur utilisant des assistants de programmation IA ou un fournisseur construisant la prochaine génération d'outils de développement IA, vos idées sont inestimables.