Dans cet article, vous apprendrez :
- Ce que Chrome DevTools pour Agents (
chrome-devtools-mcp) apporte à l’automatisation de navigateur contrôlée par IA. - Quelles sont ses limitations et comment le Browser API de Bright Data y remédie.
- Comment connecter votre agent IA préféré (par exemple, Gemini CLI, Claude Code, etc.) à
chrome-devtools-mcpet contrôler un navigateur distant via Browser API.
Plongeons-y !
Qu’est-ce que Chrome DevTools pour Agents ?
chrome-devtools-mcp, également connu sous le nom de “Chrome DevTools for agents“, est un serveur MCP open-source qui donne aux agents IA de codage le contrôle d’un navigateur basé sur Chromium via le CDP (Chrome DevTools Protocol).
Concrètement, il permet aux agents IA de naviguer sur les pages, interagir avec les éléments web, inspecter les requêtes réseau, exécuter du JavaScript, capturer des captures d’écran, déboguer des problèmes de navigateur, et analyser les performances. En coulisses, il expose les capacités de Chrome DevTools sous forme d’outils MCP que les agents IA de codage peuvent utiliser pour automatiser et inspecter les sessions de navigateur.
Le projet est disponible sur GitHub sous licence Apache 2.0 et a atteint plus de 52k étoiles GitHub.
Limitations actuelles de chrome-devtools-mcp et comment y remédier
chrome-devtools-mcp est un outil puissant pour contrôler les sessions de navigateur, en particulier pour le débogage et l’analyse des performances. Cela dit, il reste soumis à certains des défis courants associés à l’automatisation de navigateur :
- Blocages : Les sites web peuvent détecter les sessions de navigateur automatisées et répondre avec des CAPTCHA, des erreurs, ou d’autres restrictions, interrompant votre flux de travail. Cela est dû au fait que la technologie lance une nouvelle session Chrome en mode headless. De telles sessions ont un historique de navigateur et un contexte utilisateur limités, ce qui peut les rendre plus faciles à identifier comme automatisées par les sites web. De plus, les utilisateurs normaux utilisent des navigateurs avec l’interface graphique activée, pas en mode headless.
- Consommation de ressources : Exécuter plusieurs onglets ou instances de navigateur localement peut consommer des ressources système importantes. Un seul onglet Chrome peut utiliser des centaines de mégaoctets de RAM, rendant l’automatisation concurrente à grande échelle exigeante pour l’infrastructure locale.
Ces contraintes affectent à la fois la fiabilité et l’évolutivité de l’automatisation de navigateur, en particulier pour les charges de travail d’entreprise. Une configuration idéale consisterait à permettre à chrome-devtools-mcp de contrôler des navigateurs cloud conçus pour l’automatisation à grande échelle et équipés de capacités anti-bot. C’est précisément ce que le Browser API de Bright Data apporte à la table.
Browser API de Bright Data comme solution
Le Browser API de Bright Data remédie aux limitations de chrome-devtools-mcp en déplaçant l’exécution du navigateur de votre machine locale vers une infrastructure cloud entièrement gérée et conçue pour l’échelle.
Au lieu d’exécuter et de maintenir des navigateurs localement, vous pouvez connecter Chrome DevTools pour agents à Browser API via un point de terminaison CDP. Browser API fournit des sessions de navigateur cloud préconfigurées avec des fonctionnalités telles que la rotation de proxy, la résolution de CAPTCHA, et des capacités avancées d’empreinte digitale.
Important : Browser API est disponible sur le palier gratuit de Bright Data, qui inclut 5 000 crédits gratuits par mois.
Derrière le service se trouve l’infrastructure de proxy de Bright Data, avec un réseau résidentiel de plus de 400 millions d’IPs. Cela prend en charge le ciblage géographique mondial et des sessions de navigateur concurrentes illimitées, tout en offrant une disponibilité de 99,99% et un taux de réussite de 99,95%.
Comment intégrer Chrome DevTools pour Agents avec le Browser API de Bright Data
Dans ce chapitre, vous verrez comment configurer chrome-devtools-mcp dans votre agent IA. Vous le configurerez pour vous connecter à des sessions de navigateur cloud furtives et infiniment évolutives via le Browser API de Bright Data.
Remarque : Cette section se concentre sur Gemini CLI. Vous pouvez adapter les mêmes étapes à d’autres harnais d’agents IA, tels que Claude Code, OpenAI Codex, OpenCode, et autres.
Suivez les instructions ci-dessous !
Prérequis
Avant de commencer, assurez-vous d’avoir :
Quelques connaissances de base sur le fonctionnement de MCP et les outils exposés par Chrome DevTools pour agents seront utiles.
Étape n°1 : Configurer un Browser API Bright Data
Tout d’abord, récupérez l’URL de connexion distante basée sur CDP pour le Browser API de Bright Data.
Si ce n’est pas déjà fait, créez un compte Bright Data. Si vous avez déjà un compte, connectez-vous pour accéder au panneau de contrôle.
Ensuite, sélectionnez l’option “Web Access > Web Access API” dans le menu de gauche :
Si vous avez déjà une entrée Browser API dans le tableau Mes APIs (l’entrée “browser_api”, comme indiqué ci-dessous), accédez à la page API :
Sinon, cliquez sur le menu déroulant du bouton “Créer une API” et sélectionnez “Browser API” :
Cela ouvre l’assistant de configuration du Browser API. Donnez un nom à votre Browser API et configurez-le selon vos besoins :
Une fois terminé, cliquez sur “Ajouter une API” pour créer un Browser API. Ensuite, ouvrez sa page de détails :
Sur cette page, vous trouverez les détails de connexion pour les intégrations basées sur CDP sous “Puppeteer / Playwright”. L’URL CDP WebSocket du Browser API suit ce format :
wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222Pour révéler le mot de passe du Browser API, cliquez sur “Afficher” à côté du mot de passe. Entrez le code d’authentification multi-facteurs reçu par e-mail.
Vous disposez maintenant de l’URL de connexion CDP dont vous avez besoin pour configurer chrome-devtools-mcp pour le contrôle de navigateur distant. Excellent !
Étape n°2 : Configurer Browser API dans Gemini CLI via chrome-devtools-mcp
Intégrez chrome-devtools-mcp dans votre agent IA, tout en lui indiquant de contrôler des sessions de navigateur anti-détection distantes via le Browser API de Bright Data. Dans Gemini CLI, réalisez cela avec la commande suivante :
gemini mcp add --scope project chrome-devtools npx chrome-devtools-mcp@latest -- --wsEndpoint='wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222'Remarque : Assurez-vous de remplacer les espaces réservés par votre véritable URL de connexion CDP Browser API dans l’argument wsEndpoint.
Dans le terminal, vous verrez un message mentionnant que le serveur MCP chrome-devtools a été ajouté :
Notez ce qui suit :
--scope projectconfigure le serveur MCP localement, dans votre projet. Supprimez cette option si vous souhaitez configurer le serveur MCP globalement.--wsEndpoint='wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222'indique àchrome-devtools-mcpde se connecter au point de terminaison Browser API de Bright Data.
Remarque : L’utilisation de l’argument wsEndpoint est importante ici. La documentation de chrome-devtools-mcp mentionne que wsEndpoint est une alternative à browserUrl. Cependant, si vous fournissez l’URL CDP Browser API via browserUrl, l’intégration échouera avec l’erreur suivante : “Request cannot be constructed from a URL that includes credentials”.
La commande génère un fichier .gemini/settings.json dans le dossier de votre projet contenant cette configuration :
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--wsEndpoint=wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222"
]
}
}
}Alternativement, vous pouvez créer ce fichier manuellement.
Extra : Vous pouvez également configurer chrome-devtools-mcp dans votre agent IA préféré. Par exemple, dans Claude Code, exécutez :
claude mcp add chrome-devtools --scope project -- npx -- -y chrome-devtools-mcp@latest --wsEndpoint='wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222'Génial ! Votre agent IA devrait maintenant avoir accès aux outils Chrome DevTools pour agents via MCP, configuré pour se connecter à des sessions de navigateur distantes fournies par Browser API.
Étape n°3 : Vérifier que l’intégration fonctionne
Démarrez Gemini CLI (ou votre agent IA préféré) dans le dossier de votre projet :
geminiEnsuite, exécutez la commande /mcp pour voir les serveurs MCP disponibles :
Vous devriez voir le serveur MCP chrome-devtools avec ses 29 outils disponibles, dont :
| Outil | Description |
|---|---|
navigate_page |
Navigue vers des URLs, recharge des pages, ou se déplace en avant et en arrière dans l’historique du navigateur. |
click |
Clique sur un élément identifié via l’instantané de la page, avec prise en charge optionnelle du double-clic. |
fill |
Saisit du texte dans les champs, zones de texte, ou sélectionne des options dans les menus déroulants. |
fill_form |
Remplit plusieurs champs de formulaire, cases à cocher, boutons radio, et sélections en une seule opération. |
press_key |
Appuie sur des touches ou combinaisons de clavier pour les raccourcis, la navigation, et les interactions indisponibles via d’autres outils de saisie. |
type_text |
Saisit du texte dans un champ précédemment ciblé en utilisant la simulation clavier. |
hover |
Déplace le curseur sur un élément de page, utile pour déclencher des menus ou interactions basés sur le survol. |
wait_for |
Attend qu’un texte spécifié apparaisse sur la page avant de poursuivre avec les actions suivantes. |
list_pages |
Liste toutes les pages de navigateur actuellement ouvertes et leurs identifiants pour les interactions suivantes. |
new_page |
Ouvre un nouvel onglet de navigateur et le navigue vers une URL spécifiée. |
take_snapshot |
Capture l’arbre d’accessibilité de la page, exposant les éléments et identifiants uniques pour les interactions suivantes. |
evaluate_script |
Exécute du JavaScript dans la page et renvoie des résultats sérialisables en JSON depuis le contexte du navigateur. |
list_network_requests |
Liste les requêtes réseau récentes effectuées par la page, filtrées éventuellement par type de ressource. |
get_network_request |
Inspecte une requête réseau spécifique, y compris ses en-têtes, corps de requête, et données de réponse. |
take_screenshot |
Capture une capture d’écran de la page actuelle, de la fenêtre d’affichage, de la page entière, ou d’un élément spécifique. |
Fantastique ! Cela confirme que chrome-devtools-mcp est correctement configuré et que ses outils d’automatisation de navigateur sont disponibles pour votre agent IA.
La dernière étape consiste à vérifier qu’il peut utiliser ces outils pour interagir avec une session de navigateur distante via le Browser API de Bright Data.
Étape n°4 : Tester Chrome DevTools pour Agents + Browser API
Pour vérifier que Chrome DevTools pour agents peut contrôler la session Browser API configurée, testez-la sur un site web complexe protégé par des mesures anti-bot, tel que Booking.com.
Essayez l’intégration avec une tâche réelle comme celle-ci :
Ouvrez la page Booking.com dans un navigateur et recherchez des hôtels à Barcelone pour deux personnes du 23 au 24 septembre. Appliquez le filtre "4 étoiles" et triez les résultats par prix le plus bas. Extrayez les 10 premiers résultats avec le nom de l'hôtel, le prix par nuit, la note, et le nombre d'avis.Exécutez l’invite, et voici ce que vous devriez voir :
En particulier, l’agent Gemini CLI a traité la tâche comme suit :
- Appelé
navigate_pagepour atteindre Booking.com. - Utilisé l’outil
list_pagespour identifier la page de navigateur disponible. - Utilisé une combinaison des outils
clickettake_snapshotpour trouver les éléments pertinents et sélectionner les dates demandées. - Utilisé
evaluate_scriptpour effectuer les interactions supplémentaires requises et atteindre la page de résultats cible. - Employé à nouveau
take_snapshotpour inspecter la structure de la page de résultats. - Utilisé
evaluate_scriptpour extraire les données requises avec un script JavaScript personnalisé. - Renvoyé les données extraites dans un tableau.
Voici la sortie produite par l’agent :
Remarquez comment les données récupérées correspondent étroitement aux résultats affichés directement sur Booking.com :
Cet exemple simple a démontré que Chrome DevTools pour agents, connecté via MCP à Gemini CLI, peut interagir avec Booking.com via une session Browser API distante.
Booking.com est un cas de test utile car ses protections anti-bot rendent l’automatisation de navigateur difficile. Dans cette configuration, Browser API gère la session de navigateur et l’infrastructure nécessaire pour accéder au site, tandis que chrome-devtools-mcp donne à l’agent IA les outils dont il a besoin pour interagir avec le navigateur.
Le résultat est un agent IA capable d’effectuer des interactions complexes de navigateur sans vous obliger à exécuter et gérer le navigateur localement. Mission accomplie !
Autres exemples possibles
La combinaison chrome-devtools-mcp + Browser API de Bright Data peut prendre en charge de nombreux autres cas d’usage d’automatisation de navigateur, de débogage, et d’extraction de données.
Voici quelques invites que vous pouvez essayer pour différents scénarios :
- Extraire des données des requêtes réseau après interaction :
Ouvrez un site web, recherchez "web scraping", inspectez les requêtes réseau générées lors du chargement des résultats, identifiez la requête renvoyant les résultats de recherche, et extrayez les 20 premiers résultats de sa réponse. - Inspecter les réponses API :
Ouvrez une page produit, identifiez la requête réseau renvoyant ses données produit, inspectez la requête et la réponse, et extrayez le nom du produit, le prix, la disponibilité, et la note. - Analyser les performances de la page :
Ouvrez un site web et analysez ses performances. Rapportez le temps de chargement de la page, le plus grand élément visuel peint, le décalage cumulé de mise en page, et d'autres métriques de performance pertinentes, puis identifiez les goulots d'étranglement potentiels. - Déboguer les erreurs JavaScript :
Ouvrez un site web, inspectez la console pour les erreurs et avertissements JavaScript, identifiez les scripts ou pages affectés, et expliquez les causes les plus probables en fonction des informations de débogage disponibles.
Grâce à chrome-devtools-mcp, votre agent n’est pas limité à cliquer sur des liens et à lire le contenu des pages. Au contraire, il peut effectuer une inspection de la console, une analyse des performances, une surveillance du réseau, et plus encore. Comparé à des solutions comme Playwright MCP, cela le rend plus adapté aux cas d’usage nécessitant une inspection et un débogage plus approfondis du navigateur.
Conclusion
Dans cet article, vous avez appris ce qu’est Chrome DevTools pour agents et comment il prend en charge l’automatisation de navigateur via CDP. Plus précisément, vous avez vu comment l’associer au Browser API de Bright Data pour permettre à votre agent IA d’exécuter des sessions de navigateur cloud évolutives avec des capacités anti-bot intégrées.
Le résultat est une configuration d’automatisation de navigateur contrôlée par IA qui peut s’adapter aux charges de travail de niveau entreprise. Avec la même intégration, vous pouvez également construire des flux de travail de navigateur agentiques soutenus par une infrastructure de navigateur cloud.
Inscrivez-vous pour un compte Bright Data et explorez nos solutions de scraping de données web et d’automatisation de navigateur prêtes pour l’IA !
