--- title: "Laissez chrome-devtools-mcp contrôler des navigateurs anti-détection cloud" slug: chrome-devtools-mcp-with-bright-data date: 2026-10-05T07:29:25+00:00 modified: 2026-10-05T07:29:27+00:00 permalink: https://brightdata.fr/blog/ai/chrome-devtools-mcp-with-bright-data type: blog --- [ Blog ](https://brightdata.fr/blog "Blog") / [AI](https://brightdata.fr/blog/ai) [AI](https://brightdata.fr/blog/ai) # Laissez chrome-devtools-mcp contrôler des navigateurs anti-détection cloud Combinez chrome-devtools-mcp avec le Browser API de Bright Data pour permettre aux agents IA de contrôler des navigateurs anti-détection cloud en toute fluidité. 13 min de lecture [ ![Antonello Zanini](https://media.brightdata.fr/2022/12/Antonello-Zanini-2-50x50.jpg) ](https://brightdata.com/blog/authors/antonello-zanini) [Antonello Zanini Technical Writer ](https://brightdata.com/blog/authors/antonello-zanini) ![Chrome Dev tools with Bright Data](https://media.brightdata.fr/2026/09/Chrome-Dev-tools-with-Bright-Data.png) 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-mcp` et 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](https://developer.chrome.com/docs/devtools/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)](https://chromedevtools.github.io/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](https://github.com/ChromeDevTools/chrome-devtools-mcp). ## 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](/blog/proxy-101/what-is-a-headless-browser). 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](/products/scraping-browser) apporte à la table. ### Browser API de Bright Data comme solution [Le Browser API de Bright Data](https://docs.brightdata.com/products/scraping-browser/introduction) 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](https://docs.brightdata.com/general/account/billing-and-pricing/free-tier), 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](/proxy-types/residential-proxies). 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](/blog/ai/what-is-an-ai-harness), tels que Claude Code, OpenAI Codex, OpenCode, et autres. Suivez les instructions ci-dessous ! ### Prérequis Avant de commencer, assurez-vous d’avoir : - [Gemini CLI installé localement](https://geminicli.com/docs/get-started/installation/). - Un [compte Bright Data](/?hs_signup=1). Quelques connaissances de base sur [le fonctionnement de MCP](https://modelcontextprotocol.io/docs/2026-07-28/learn/architecture) et les outils exposés par [Chrome DevTools pour agents](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md) 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](/cp/start) pour accéder au panneau de contrôle. Ensuite, sélectionnez l’option “Web Access > Web Access API” dans le menu de gauche : ![Navigation vers la page ](https://media.brightdata.com/2026/09/s_99B13D966E8B3D1F2C7D6AFD90B71B18B00C9D323C467682BFFD8C9A396D0303_1780479303225_image.png)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 : ![Notez l'API ](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789560488496_image.png)Sinon, cliquez sur le menu déroulant du bouton “Créer une API” et sélectionnez “Browser API” : ![Cliquer sur l'option ](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789561904290_image.png)Cela ouvre l’assistant de configuration du Browser API. Donnez un nom à votre Browser API et [configurez-le selon vos besoins](https://docs.brightdata.com/scraping-automation/scraping-browser/quickstart) : ![Configuration d'un Browser API](https://media.brightdata.com/2026/09/s_99B13D966E8B3D1F2C7D6AFD90B71B18B00C9D323C467682BFFD8C9A396D0303_1780479532077_image.png)Une fois terminé, cliquez sur “Ajouter une API” pour créer un Browser API. Ensuite, ouvrez sa page de détails : ![Obtenir l'URL CDP du Browser API](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789561700347_image.png)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 : ```none wss://:@brd.superproxy.io:9222 ``` Pour 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 : ```none gemini mcp add --scope project chrome-devtools npx chrome-devtools-mcp@latest -- --wsEndpoint='wss://:@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é : ![La sortie produite par la commande](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789562135737_image.png)Notez ce qui suit : - `--scope project` configure le serveur MCP localement, dans votre projet. Supprimez cette option si vous souhaitez configurer le serveur MCP globalement. - `--wsEndpoint='wss://:@brd.superproxy.io:9222'` indique à `chrome-devtools-mcp` de 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`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/e2e965aa2653c9e210193236031989c21a249b67/docs/configuration.md). 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`](https://geminicli.com/docs/reference/configuration/) dans le dossier de votre projet contenant cette configuration : ```none { "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "-y", "chrome-devtools-mcp@latest", "--wsEndpoint=wss://:@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é](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/client-configurations.md). Par exemple, dans Claude Code, exécutez : ```none claude mcp add chrome-devtools --scope project -- npx -- -y chrome-devtools-mcp@latest --wsEndpoint='wss://:@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 : ```none gemini ``` Ensuite, exécutez la commande `/mcp` pour voir les serveurs MCP disponibles : ![Notez les 29 outils MCP chrome-devtools](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789550937784_image.png)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 : ```none 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 : ![Exécution de l'invite](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789552581424_11.gif)En particulier, l’agent Gemini CLI a traité la tâche comme suit : 1. Appelé `navigate_page` pour atteindre Booking.com. 2. Utilisé l’outil `list_pages` pour identifier la page de navigateur disponible. 3. Utilisé une combinaison des outils `click` et `take_snapshot` pour trouver les éléments pertinents et sélectionner les dates demandées. 4. Utilisé `evaluate_script` pour effectuer les interactions supplémentaires requises et atteindre la page de résultats cible. 5. Employé à nouveau `take_snapshot` pour inspecter la structure de la page de résultats. 6. Utilisé `evaluate_script` pour extraire les données requises avec un script JavaScript personnalisé. 7. Renvoyé les données extraites dans un tableau. Voici la sortie produite par l’agent : ![Le résultat produit par l'agent](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789551511817_image.png)Remarquez comment les données récupérées correspondent étroitement aux résultats affichés directement sur Booking.com : ![Les résultats produits par l'agent correspondent à ceux disponibles sur Booking.com](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789551914832_image.png)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](/blog/ai/playwright-mcp-server), 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 ! Contacter ventesEssai gratuit![google social icon](/wp-content/themes/brightdata/assets/images/ic_google.svg) Table des matières [ ](https://news.ycombinator.com/submitlink?t=Laissez+chrome-devtools-mcp+contr%C3%B4ler+des+navigateurs+anti-d%C3%A9tection+cloud&u=https://brightdata.fr/blog/ai/chrome-devtools-mcp-with-bright-data) [ ](https://www.linkedin.com/shareArticle?mini=true&title=Laissez+chrome-devtools-mcp+contr%C3%B4ler+des+navigateurs+anti-d%C3%A9tection+cloud&url=https://brightdata.fr/blog/ai/chrome-devtools-mcp-with-bright-data) [ ](http://www.reddit.com/submit?title=Laissez+chrome-devtools-mcp+contr%C3%B4ler+des+navigateurs+anti-d%C3%A9tection+cloud&url=https://brightdata.fr/blog/ai/chrome-devtools-mcp-with-bright-data) ## Vous pourriez aussi être intéressé par [ ![Audio Web Scraping for AI Processing](https://media.brightdata.fr/2026/09/Audio-Web-Scraping-for-AI-Processing.png) ](https://brightdata.fr/blog/donnees-web/audio-web-scraping "Scraping Audio Web pour le Traitement IA : Un Tutoriel Complet") [Données Web ![Antonello Zanini](https://media.brightdata.fr/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### Scraping Audio Web pour le Traitement IA : Un Tutoriel Complet Scrapez de l’audio à grande échelle pour le traitement IA avec Bright Data. Apprenez la conversion de format et la transcription IA pour des résultats de qualité entreprise. 05-Oct-2026 18 min de lecture ](https://brightdata.fr/blog/donnees-web/audio-web-scraping) [ ![TrueFoundry Agent Harness with Bright Data MCP](https://media.brightdata.fr/2026/08/TrueFoundry-Agent-Harness-with-Web-MCP.png) ](https://brightdata.fr/blog/ai/trueforge-with-bright-data "Créer des agents IA de production avec TrueForge + Bright Data MCP") [AI ![Satyam Tripathi](https://media.brightdata.fr/2024/09/Satyam-Tripathi-50x50.png) Satyam Tripathi Technical Writer ### Créer des agents IA de production avec TrueForge + Bright Data MCP Bright Data MCP donne aux agents TrueForge la couche de récupération que le harnais ne fournit pas, afin que les sous-agents puissent lire les sites qui bloquent l’accès automatisé. 04-Oct-2026 42 min de lecture ](https://brightdata.fr/blog/ai/trueforge-with-bright-data) [ ![Web Scraping with GLM](https://media.brightdata.fr/2026/09/Web-Scraping-with-GLM.png) ](https://brightdata.fr/blog/ai/web-scraping-with-glm "Scraping web avec GLM : Extraction de données textuelles et visuelles") [AI ![Antonello Zanini](https://media.brightdata.fr/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### Scraping web avec GLM : Extraction de données textuelles et visuelles Utilisez GLM-5.3 avec le Web Unlocker de Bright Data pour le scraping web piloté par l’IA. Extrayez automatiquement des données textuelles et visuelles en contournant les obstacles courants. 16-Sep-2026 7 min de lecture ](https://brightdata.fr/blog/ai/web-scraping-with-glm)