Chrome DevTools MCP : automatisation et débogage du navigateur dopés à l'IA

Pour approfondir votre compréhension des agents d'IA et situer des outils comme Chrome DevTools MCP dans l'ensemble du paysage, découvrez le cours Introduction to AI Agents de DataCamp ou le parcours de compétences AI Agent Fundamentals.

Chrome DevTools MCP est un serveur officiel Model Context Protocol de l'équipe Chrome DevTools qui permet aux assistants de codage IA de contrôler Chrome en langage naturel. Plutôt que d'écrire des scripts, vous indiquez à votre assistant IA ce que vous voulez (« naviguez vers cette page et vérifiez les erreurs console » ou « remplissez ce formulaire et prenez une capture d'écran »), et il gère les détails techniques.

Le serveur vous donne accès à de puissants outils d'automatisation et de débogage du navigateur. Il est conçu sur Puppeteer, ce qui le rend fiable et exécuté entièrement sur votre machine. Vous n'avez pas à écrire une seule ligne de code Puppeteer.

Dans ce tutoriel, vous apprendrez à utiliser ce serveur MCP avec des assistants de codage IA comme Claude, Cursor et Cline. Nous couvrirons l'installation et la configuration, puis nous passerons aux fonctionnalités cœur : automatisation du navigateur, débogage et inspection. Tout au long de l'article, nous utiliserons Conduit (demo.realworld.io), une plateforme de blog de style Medium, pour illustrer des exemples concrets.

Si vous découvrez le Model Context Protocol, je vous recommande ce guide MCP complet pour comprendre en profondeur comment MCP connecte les modèles d'IA à des outils externes. Vous pouvez aussi consulter notre tutoriel Claude pour Chrome et notre guide des meilleurs navigateurs IA. Pour une autre approche de l'automatisation de navigateur par l'IA, lisez notre tutoriel ChatGPT Atlas.

En bref

• Chrome DevTools MCP est un serveur MCP officiel qui permet aux assistants de codage IA de contrôler Chrome en langage naturel

• Il expose 26 outils répartis en 6 catégories : automatisation des entrées, navigation, débogage, réseau, performance et émulation

• Installez-le avec claude mcp add chrome-devtools npx chrome-devtools-mcp@latest pour Claude Code (configuration similaire pour les autres clients)

• Automatisez la navigation, le remplissage de formulaires et les captures d'écran sans écrire de scripts Puppeteer

• Déboguez des applications web en inspectant les erreurs console, les requêtes réseau et en exécutant du JavaScript – le tout en conversation

• Construisez les frontends de façon itérative en laissant l'IA prendre des captures d'écran pour vérifier son travail à chaque étape

Qu'est-ce que Chrome DevTools MCP ?

Voici comment l'architecture fonctionne sous le capot.

Le serveur expose 26 outils organisés en 6 catégories :

• Automatisation des entrées (7 outils) : click, drag, fill, fill_form, handle_dialog, hover, upload_file
• Navigation (7 outils) : navigate_page, new_page, list_pages, select_page, close_page, navigate_page_history, wait_for
• Débogage (4 outils) : evaluate_script, list_console_messages, take_screenshot, take_snapshot
• Réseau (2 outils) : list_network_requests, get_network_request
• Performance (3 outils) : performance_start_trace, performance_stop_trace, performance_analyze_insight
• Émulation (3 outils) : emulate_cpu, emulate_network, resize_page

L'automatisation du navigateur devient conversationnelle. Au lieu d'écrire des scripts Puppeteer et de déboguer des sélecteurs CSS, vous décrivez votre intention en langage naturel. L'assistant IA se charge des détails techniques.

Chrome DevTools MCP vs approches traditionnelles

Avec ces outils, votre assistant IA peut vous aider à :

• Construire des frontends pas à pas en laissant l'agent prendre des captures d'écran à chaque étape
• Tester des parcours utilisateurs de bout en bout : inscription, navigation dans les fonctionnalités, vérification de chaque étape
• Déboguer en vérifiant les erreurs console et les requêtes réseau sans ouvrir DevTools manuellement
• Automatiser la documentation visuelle en capturant des pages ou des états d'application
• Extraire des données de pages web en exécutant du JavaScript directement dans le contexte de la page

Tout cela est piloté par des commandes en langage naturel au lieu d'écrire des scripts Puppeteer.

Chrome DevTools MCP fonctionne avec Claude Desktop, Cursor, Cline et VSCode Copilot. Comme il s'agit d'un serveur MCP parmi d'autres, vous pouvez le combiner à des serveurs d'accès au système de fichiers, des outils de base de données et des APIs pour créer des flux couvrant plusieurs outils.

Installation et configuration de Chrome DevTools MCP

Vous aurez besoin de :

• Node.js et npm installés sur votre machine
• Un assistant de codage IA compatible MCP (nous utiliserons Claude Code dans ce tutoriel)
• Le navigateur Chrome (Puppeteer gère cela automatiquement, vous n'avez rien à configurer)

Des notions de base sur les DevTools du navigateur aident, mais ne sont pas indispensables.

Installer Chrome DevTools MCP

Chrome DevTools MCP s'exécute via la configuration MCP de votre assistant IA. La configuration varie légèrement selon l'assistant de codage utilisé. Nous vous montrons l'installation pour Claude Code, mais d'autres éditeurs comme Cursor, Cline et VSCode Copilot procèdent de manière similaire.

Pour Claude Code, exécutez cette commande dans votre terminal :

claude mcp add chrome-devtools npx chrome-devtools-mcp@latestPropulsé par

Cette commande enregistre le serveur Chrome DevTools MCP auprès de Claude Code. Le serveur s'exécute via npx, qui télécharge et exécute le package sans installation permanente. Le @latest garantit d'obtenir la version la plus récente.

Après avoir exécuté la commande, redémarrez Claude Code pour charger le nouveau serveur.

Si vous utilisez un autre assistant de codage IA

Les autres clients MCP proposent des méthodes d'installation similaires – certains utilisent des commandes, d'autres des fichiers de configuration ou des boutons d'installation en un clic. Consultez la page GitHub de Chrome DevTools MCP pour les instructions propres à Cursor, Cline, Gemini CLI, Windsurf et autres clients pris en charge.

Tester votre configuration

Vérifions que tout fonctionne avec une commande simple :

Navigate to demo.realworld.io and take a screenshotPropulsé par

Vous devriez voir :

• Chrome se lance (vous verrez la fenêtre du navigateur sauf si vous avez configuré le mode sans interface)
• La page d'accueil de Conduit se charge
• Votre assistant IA capture et affiche une capture d'écran

En cas de problème, contrôlez ces points :

• Version de Node.js : Chrome DevTools MCP requiert Node.js v20.19 ou plus récent
• Autorisations npm : assurez-vous que npm peut installer des packages
• Redémarrage requis : votre assistant IA doit être redémarré après des modifications de configuration
• Emplacement du fichier de config : vérifiez que vous avez modifié le bon fichier de paramètres MCP pour votre assistant

Notions de base de l'automatisation du navigateur

Chrome DevTools MCP vous fournit six outils essentiels pour interagir avec des pages web. Utilisez navigate_page pour charger des URL, click pour interagir avec des éléments, fill et fill_form pour saisir du texte, hover pour déclencher les effets au survol, et take_screenshot pour capturer l'écran. Ces outils couvrent la majorité des tâches d'automatisation du navigateur que vous rencontrerez.

Navigation et captures d'écran

Chargeons une page. Dites à votre assistant IA :

Navigate to demo.realworld.ioPropulsé par

L'IA utilise l'outil navigate_page, Chrome s'ouvre et la page d'accueil Conduit se charge. Vous verrez la fenêtre à moins d'avoir configuré le mode sans interface.

Pour documenter ce que vous voyez, demandez simplement :

Take a screenshot of the homepagePropulsé par

L'IA capture la page courante avec take_screenshot et vous affiche le résultat. Pratique pour la documentation visuelle ou vérifier le rendu.

Interaction avec les éléments

Vous pouvez interagir avec n'importe quel élément sans écrire de sélecteurs CSS ni inspecter d'ID. Décrivez simplement ce que vous voulez :

Click the Sign in linkPropulsé par

L'IA identifie l'élément visé et clique dessus avec l'outil click. La page de connexion se charge.

Vous pouvez aussi survoler des éléments :

Hover over the Sign up linkPropulsé par

L'IA utilise l'outil hover. S'il y a un tooltip ou un menu, il apparaît.

Remplissage de formulaires

Les formulaires rendent vite l'automatisation fastidieuse si vous codez des scripts. Avec Chrome DevTools MCP, il suffit de décrire ce qu'il faut renseigner.

Fill one field at a time:
Fill in the email field with [email protected]
Fill in the password field with testpass123
Or fill multiple fields at once:
Fill out the sign-in form with email [email protected] and password testpass123Propulsé par

L'IA utilise fill_form pour gérer tous les champs d'un coup. Voici à quoi ressemble le formulaire rempli :

L'IA identifie les bons champs d'après votre description. Vous ne touchez pas au HTML.

Débogage et inspection

Chrome DevTools MCP fournit trois outils clés pour le débogage : list_console_messages pour voir la sortie console, list_network_requests pour l'activité réseau, et evaluate_script pour exécuter du JavaScript et extraire des données.

Avec l'assistant IA, tout cela se fait en conversation. Vous posez des questions en langage naturel, l'IA les traduit en appels d'outils MCP en arrière-plan.

Voici à quoi cela ressemble :

L'assistant IA comprend votre intention, exécute les outils Chrome DevTools adéquats et présente les résultats de façon lisible. Voyons cela en pratique.

Inspection de la console

Les erreurs console sont souvent le premier indicateur en cas de panne. Plutôt que d'ouvrir DevTools, demandez à votre assistant IA :

Navigate to demo.realworld.io and check the console for any errorsPropulsé par

L'IA charge la page et inspecte la console avec list_console_messages. Voici ce qu'elle trouve :

Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/articles'
from origin 'https://demo.realworld.io' has been blocked by CORS policy
Error> Access to XMLHttpRequest at 'https://api.realworld.io/api/tags'
from origin 'https://demo.realworld.io' has been blocked by CORS policyPropulsé par

Ces erreurs CORS (Cross-Origin Resource Sharing) – une fonctionnalité de sécurité du navigateur qui restreint les requêtes vers d'autres domaines – expliquent pourquoi la page affiche « Loading articles… » et « Loading tags… » au lieu du contenu :

Vous pouvez aller plus loin en demandant à l'IA de filtrer et d'interpréter ces messages :

Are there any errors or warnings on this page?Propulsé par

L'IA analyse la console et vous indique : « Oui, deux erreurs CORS bloquent les requêtes API pour les articles et les tags. »

Vous obtenez ainsi une visibilité immédiate sur la cause sans ouvrir la console DevTools.

Vue d'ensemble des requêtes réseau

Les erreurs console renvoient souvent à des problèmes réseau. Pour comprendre ce qu'il se passe vraiment, inspectez l'activité réseau :

Show me what network requests are made on the homepagePropulsé par

L'IA utilise list_network_requests et renvoie la liste de toutes les requêtes. Vous verrez les requêtes réussies (CSS, polices, fichiers JavaScript) et celles qui échouent :

https://demo.realworld.io/ GET [success - 200]
https://demo.realworld.io/main.css GET [success - 200]
https://demo.realworld.io/main.js GET [success - 200]
https://conduit.productionready.io/api/tags GET [failed - 307]
https://conduit.productionready.io/api/articles?limit=10&offset=0 GET [failed - 307]
https://api.realworld.io/api/tags GET [failed - net::ERR_FAILED]
https://api.realworld.io/api/articles?limit=10&offset=0 GET [failed - net::ERR_FAILED]Propulsé par

Posez des questions de suivi pour creuser :

Are there any failed requests?Propulsé par

L'IA filtre et identifie le problème : « Oui, quatre requêtes API ont échoué. Deux renvoient des redirections 307 et deux échouent complètement avec des erreurs ERR_FAILED. »

Vous repérez ainsi rapidement les anomalies sans passer par l'onglet Network.

Exécution de JavaScript et extraction de données

Au-delà de la console et du réseau, vous pouvez exécuter du code directement dans la page pour vérifier son état ou extraire des informations. Utilisez evaluate_script pour cela :

Check if any articles are displayed on the homepagePropulsé par

L'IA exécute du JavaScript pour compter les éléments d'article :

const articles = document.querySelectorAll('.article-preview');
return articles.length;Propulsé par

Résultat : « 0 article affiché. La page indique ‘Loading articles…’, ce qui suggère que les erreurs API empêchent le chargement du contenu. »

Vous pouvez également extraire des données plus complexes :

Get the page title and main heading textPropulsé par

L'IA évalue :

return {
 pageTitle: document.title,
 mainHeading: document.querySelector('h1')?.textContent
};Propulsé par

Résultat : {pageTitle: "Home — Conduit", mainHeading: "conduit"}

Cela vous permet de vérifier le contenu, d'extraire des données structurées ou de contrôler le chargement d'éléments dynamiques. Les outils take_screenshot et take_snapshot complètent cela en capturant une documentation visuelle et structurelle lorsque nécessaire.

Ces trois capacités de débogage s'enchaînent naturellement. Commencez par les messages console pour repérer les erreurs, vérifiez les requêtes réseau pour comprendre les échecs, puis utilisez l'exécution JavaScript pour contrôler l'impact sur la page – le tout en discutant avec votre assistant IA, sans changer d'outil ni écrire de scripts d'inspection.

Construire des frontends avec Chrome DevTools MCP

Les assistants IA savent construire des interfaces web, mais ils ne voient pas ce qu'ils créent. Vous finissez par prendre vous-même des captures et demander des ajustements.

Chrome DevTools MCP change la donne. L'IA prend ses propres captures, vérifie les mises en page et itère jusqu'à ce que tout soit correct.

Créons un clone de ChatGPT avec Streamlit. Vous aurez besoin d'une clé d'API OpenAI. Fournissez-la à votre assistant IA lors de l'exécution du prompt pour qu'il puisse vérifier que l'app fonctionne. Voici le prompt :

Build a ChatGPT clone using Streamlit. Create a clean chat interface
with message history, text input, and OpenAI API integration. Include
a sidebar for API key management and chat management features (Clear
Chat, New Chat, message counter). Use Chrome DevTools MCP to verify
the UI at each step.Propulsé par

L'IA crée l'app avec une barre latérale et prend une capture pour vérifier la mise en page initiale :

La barre latérale comprend la saisie de clé API, des boutons Clear Chat et New Chat, et un compteur à 0. L'interface étant prête, vérifions le chat.

Test avec une question simple :

Le chat répond correctement et le compteur indique deux messages (dans la capture suivante). Mais gère-t-il une conversation multi-tours ?

Test du contexte de conversation :

L'IA se souvient de l'échange précédent. Vérifions ensuite la fonction Clear Chat.

Clic sur le bouton Clear Chat :

Le chat est bien réinitialisé et le compteur revient à 0.

Démarrage d'un nouveau chat :

Parfait. L'IA a construit un clone fonctionnel de ChatGPT, vérifié l'apparence à chaque étape et testé toutes les fonctionnalités sans intervention humaine.

Cela fonctionne avec n'importe quel framework : React, Vue, Svelte, HTML pur. L'IA vérifie les mises en page, teste les interactions et détecte les bugs avant même que vous ne consultiez le code.

Conclusion et prochaines étapes

Chrome DevTools MCP apporte l'automatisation du navigateur par la conversation. Vous décrivez votre besoin, et votre assistant IA gère la technique. Pas de scripts à écrire, pas de sélecteurs à déboguer.

Dans cet article, nous avons vu les bases : installer le serveur, naviguer, remplir des formulaires, cliquer sur des éléments et prendre des captures. Nous sommes ensuite passés au débogage avec l'inspection de la console, la surveillance réseau et l'exécution de JavaScript. Enfin, nous avons montré comment ces outils s'articulent pour construire des frontends où l'IA peut voir ce qu'elle crée.

Que tester ensuite

Commencez par naviguer vers un site sur lequel vous travaillez et demandez à votre IA de vérifier les erreurs console ou d'inspecter les requêtes réseau. Si vous utilisez Claude Code, notre guide des bonnes pratiques Claude Code couvre des schémas de prompts efficaces pour l'usage des outils. Prenez des captures d'états différents. Testez les soumissions de formulaires.

Ensuite, combinez plusieurs outils : naviguez vers une page, remplissez un formulaire, soumettez-le et capturez le résultat. Consultez les messages console, listez les requêtes réseau en erreur et exécutez du JavaScript pour vérifier l'état de la page.

Une fois à l'aise avec les bases, créez un petit composant UI avec votre IA et laissez-la vérifier la mise en page à chaque étape. Observez comment elle détecte les problèmes visuels avant même votre vérification manuelle.

Pour la performance, utilisez les outils (performance_start_trace, performance_stop_trace, performance_analyze_insight) pour profiler les temps de chargement et identifier les goulets d'étranglement. Utilisez l'émulation (emulate_cpu, emulate_network, resize_page) pour tester dans différentes conditions.

Chrome DevTools MCP est un serveur parmi d'autres. Combinez-le avec des serveurs système de fichiers, des outils de base de données ou des intégrations d'API pour créer des workflows couvrant plusieurs systèmes. Pour davantage d'exemples MCP, consultez notre tutoriel Codex CLI MCP et le tutoriel Google ADK MCP.

Si vous souhaitez construire vos propres serveurs MCP, consultez Building an MCP Server and Client with FastMCP 2.0.