--- title: "Permite que chrome-devtools-mcp controle navegadores anti-detección en la nube" slug: chrome-devtools-mcp-with-bright-data date: 2026-10-05T07:25:37+00:00 modified: 2026-10-05T07:25:40+00:00 permalink: https://brightdata.es/blog/ai/chrome-devtools-mcp-with-bright-data type: blog --- [ Blog ](https://brightdata.es/blog "Blog") / [AI](https://brightdata.es/blog/ai) [AI](https://brightdata.es/blog/ai) # Permite que chrome-devtools-mcp controle navegadores anti-detección en la nube Combina chrome-devtools-mcp con el Browser API de Bright Data para que los agentes de IA controlen navegadores anti-detección en la nube sin esfuerzo. 12 min de lectura [ ![Antonello Zanini](https://media.brightdata.es/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.es/2026/09/Chrome-Dev-tools-with-Bright-Data.png) En este artículo, aprenderás: - Qué ofrece Chrome DevTools for Agents (`chrome-devtools-mcp`) a la automatización de navegadores controlados por IA. - Cuáles son sus limitaciones y cómo el Browser API de Bright Data las resuelve. - Cómo conectar tu agente de IA preferido (p. ej., Gemini CLI, Claude Code, etc.) a `chrome-devtools-mcp` y controlar un navegador remoto a través del Browser API. ¡Empecemos! ## ¿Qué es Chrome DevTools for Agents? `chrome-devtools-mcp`, también conocido como “[Chrome DevTools for agents](https://developer.chrome.com/docs/devtools/agents)“, es un servidor MCP de código abierto que da a los agentes de codificación de IA control sobre un navegador basado en Chromium mediante el [CDP (Chrome DevTools Protocol)](https://chromedevtools.github.io/devtools-protocol/). En detalle, permite que los agentes de IA naveguen páginas, interactúen con elementos web, inspeccionen solicitudes de red, ejecuten JavaScript, capturen capturas de pantalla, depuren problemas del navegador y analicen el rendimiento. Internamente, expone las capacidades de Chrome DevTools como herramientas MCP que los agentes de codificación de IA pueden usar para automatizar e inspeccionar sesiones de navegador. El proyecto está disponible en GitHub bajo la licencia Apache 2.0 y ha obtenido [más de 52 mil estrellas en GitHub](https://github.com/ChromeDevTools/chrome-devtools-mcp). ## Limitaciones actuales de `chrome-devtools-mcp` y cómo resolverlas `chrome-devtools-mcp` es una herramienta potente para controlar sesiones de navegador, en especial para depuración y análisis de rendimiento. Al mismo tiempo, sigue sujeto a algunos de los desafíos comunes asociados con la automatización de navegadores: - **Bloqueos**: Los sitios web pueden detectar sesiones de navegador automatizadas y responder con CAPTCHAs, errores u otras restricciones, interrumpiendo tu flujo de trabajo. Esto se debe a que la tecnología inicia una sesión nueva de Chrome [en modo headless](/blog/proxy-101/what-is-a-headless-browser). Estas sesiones tienen historial de navegador y contexto de usuario limitados, lo que facilita que los sitios web las identifiquen como automatizadas. Además, los usuarios habituales usan navegadores con la GUI habilitada, no en modo headless. - **Consumo de recursos**: Ejecutar varias pestañas o instancias de navegador localmente puede consumir importantes recursos del sistema. Una sola pestaña de Chrome puede usar cientos de megabytes de RAM, lo que hace que la automatización concurrente a gran escala sea exigente para la infraestructura local. Estas limitaciones afectan tanto la fiabilidad como la escalabilidad de la automatización de navegadores, especialmente en cargas de trabajo empresariales. Una configuración ideal sería permitir que `chrome-devtools-mcp` controle navegadores en la nube diseñados para automatización a gran escala y equipados con capacidades anti-bot. Esto es precisamente lo que ofrece [Browser API de Bright Data](/products/scraping-browser). ### Browser API de Bright Data como solución [El Browser API de Bright Data](https://docs.brightdata.com/products/scraping-browser/introduction) resuelve las limitaciones de `chrome-devtools-mcp` al trasladar la ejecución del navegador desde tu máquina local a una infraestructura en la nube totalmente gestionada y construida para escalar. En lugar de ejecutar y mantener navegadores localmente, puedes conectar Chrome DevTools for agents al Browser API mediante un endpoint CDP. El Browser API ofrece sesiones de navegador en la nube preconfiguradas con funciones como rotación de proxies, resolución de CAPTCHA y capacidades avanzadas de huella digital. **Importante**: El Browser API está disponible en el [nivel gratuito de Bright Data](https://docs.brightdata.com/general/account/billing-and-pricing/free-tier), que incluye 5000 créditos gratuitos al mes. Detrás del servicio está la infraestructura de proxies de Bright Data, con una red residencial de [más de 400 millones de IPs](/proxy-types/residential-proxies). Esto permite geolocalización global y sesiones de navegador concurrentes ilimitadas, además de ofrecer un 99,99 % de tiempo de actividad y una tasa de éxito del 99,95 %. ## Cómo integrar Chrome DevTools for Agents con el Browser API de Bright Data En este capítulo, verás cómo configurar `chrome-devtools-mcp` en tu agente de IA. Lo configurarás para que se conecte a sesiones de navegador en la nube sigilosas e infinitamente escalables mediante el Browser API de Bright Data. **Nota**: Esta sección se centra en Gemini CLI. Puedes adaptar los mismos pasos a [otros entornos de agentes de IA](/blog/ai/what-is-an-ai-harness), como Claude Code, OpenAI Codex, OpenCode y otros. ¡Sigue las instrucciones a continuación! ### Requisitos previos Antes de comenzar, asegúrate de tener: - [Gemini CLI instalado localmente](https://geminicli.com/docs/get-started/installation/). - Una [cuenta de Bright Data](/?hs_signup=1). Será útil tener conocimientos básicos sobre [cómo funciona MCP](https://modelcontextprotocol.io/docs/2026-07-28/learn/architecture) y las herramientas expuestas por [Chrome DevTools for agents](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md). ### Paso #1: Configurar un Browser API de Bright Data Primero, obtén la URL de conexión remota basada en CDP para el Browser API de Bright Data. Si aún no lo has hecho, crea una cuenta de Bright Data. Si ya tienes una cuenta, [inicia sesión](/cp/start) para acceder al panel de control. Luego, selecciona la opción “Web Access > Web Access API” en el menú de la izquierda: ![Navegando a la página ](https://media.brightdata.com/2026/09/s_99B13D966E8B3D1F2C7D6AFD90B71B18B00C9D323C467682BFFD8C9A396D0303_1780479303225_image.png)Si ya tienes una entrada de Browser API en la tabla My APIs (la entrada “browser\_api”, como se muestra abajo), accede a la página de la API: ![Observa la API ](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789560488496_image.png)De lo contrario, haz clic en el desplegable del botón “Create API” y selecciona “Browser API”: ![Haciendo clic en la opción ](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789561904290_image.png)Esto abre el asistente de configuración del Browser API. Dale un nombre a tu Browser API y [configúralo según tus necesidades](https://docs.brightdata.com/scraping-automation/scraping-browser/quickstart): ![Configurando un Browser API](https://media.brightdata.com/2026/09/s_99B13D966E8B3D1F2C7D6AFD90B71B18B00C9D323C467682BFFD8C9A396D0303_1780479532077_image.png)Una vez que termines, haz clic en “Add API” para crear un Browser API. Luego, abre su página de detalles: ![Obteniendo la URL CDP del Browser API](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789561700347_image.png)En esta página, encontrarás los detalles de conexión para integraciones basadas en CDP bajo “Puppeteer / Playwright”. La URL CDP de WebSocket del Browser API sigue este formato: ```none wss://:@brd.superproxy.io:9222 ``` Para revelar la contraseña del Browser API, haz clic en “Show” junto a la contraseña. Ingresa el código de autenticación multifactor recibido por correo electrónico. Ahora tienes la URL de conexión CDP que necesitas para configurar `chrome-devtools-mcp` para el control remoto del navegador. ¡Excelente! ### Paso #2: Configurar Browser API en Gemini CLI mediante `chrome-devtools-mcp` Integra `chrome-devtools-mcp` en tu agente de IA, indicándole que controle sesiones de navegador anti-detección remotas mediante el Browser API de Bright Data. En Gemini CLI, logra esto con el siguiente comando: ```none gemini mcp add --scope project chrome-devtools npx chrome-devtools-mcp@latest -- --wsEndpoint='wss://:@brd.superproxy.io:9222' ``` **Nota**: Asegúrate de reemplazar los marcadores de posición con tu URL de conexión CDP real del Browser API en el argumento `wsEndpoint`. En la terminal, verás un mensaje que menciona que el servidor MCP `chrome-devtools` ha sido añadido: ![El resultado producido por el comando](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789562135737_image.png)Observa lo siguiente: - `--scope project` configura el servidor MCP localmente, dentro de tu proyecto. Elimina esta opción si quieres configurar el servidor MCP de forma global. - `--wsEndpoint='wss://:@brd.superproxy.io:9222'` indica a `chrome-devtools-mcp` que se conecte al endpoint del Browser API de Bright Data. **Nota**: Usar el argumento `wsEndpoint` es importante aquí. La documentación de `chrome-devtools-mcp` menciona que [`wsEndpoint` es una alternativa a `browserUrl`](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/e2e965aa2653c9e210193236031989c21a249b67/docs/configuration.md). Sin embargo, si proporcionas la URL CDP del Browser API mediante `browserUrl`, la integración fallará con el siguiente error: “Request cannot be constructed from a URL that includes credentials”. El comando genera un archivo [`.gemini/settings.json`](https://geminicli.com/docs/reference/configuration/) en la carpeta de tu proyecto con esta configuración: ```none { "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "-y", "chrome-devtools-mcp@latest", "--wsEndpoint=wss://:@brd.superproxy.io:9222" ] } } } ``` Alternativamente, puedes crear este archivo manualmente. **Extra**: También puedes configurar `chrome-devtools-mcp` en [tu agente de IA preferido](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/client-configurations.md). Por ejemplo, en Claude Code, ejecuta: ```none claude mcp add chrome-devtools --scope project -- npx -- -y chrome-devtools-mcp@latest --wsEndpoint='wss://:@brd.superproxy.io:9222' ``` ¡Increíble! Tu agente de IA ahora debería tener acceso a las herramientas de Chrome DevTools for agents mediante MCP, configuradas para conectarse a sesiones de navegador remotas proporcionadas por el Browser API. ### Paso #3: Comprobar que la integración funciona Inicia Gemini CLI (o tu agente de IA favorito) en la carpeta de tu proyecto: ```none gemini ``` Luego, ejecuta el comando `/mcp` para ver los servidores MCP disponibles: ![Observa las 29 herramientas MCP de chrome-devtools](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789550937784_image.png)Deberías ver el servidor MCP `chrome-devtools` con sus 29 herramientas disponibles, incluyendo: **Herramienta****Descripción**`navigate_page`Navega a URLs, recarga páginas o avanza y retrocede en el historial del navegador.`click`Hace clic en un elemento identificado mediante la captura de la página, con soporte opcional para doble clic.`fill`Introduce texto en campos de entrada, áreas de texto o selecciona opciones de menús desplegables.`fill_form`Completa múltiples campos de formulario, casillas de verificación, botones de radio y selecciones en una sola operación.`press_key`Presiona teclas o combinaciones de teclado para atajos, navegación e interacciones no disponibles mediante otras herramientas de entrada.`type_text`Escribe texto en una entrada previamente enfocada mediante simulación de teclado.`hover`Mueve el puntero sobre un elemento de la página, útil para activar menús o interacciones basadas en hover.`wait_for`Espera hasta que aparezca un texto específico en la página antes de continuar con las siguientes acciones.`list_pages`Lista todas las páginas del navegador actualmente abiertas y sus identificadores para interacciones posteriores.`new_page`Abre una nueva pestaña del navegador y la navega a una URL especificada.`take_snapshot`Captura el árbol de accesibilidad de la página, exponiendo elementos e identificadores únicos para interacciones posteriores.`evaluate_script`Ejecuta JavaScript dentro de la página y devuelve resultados serializables en JSON desde el contexto del navegador.`list_network_requests`Lista las solicitudes de red recientes realizadas por la página, con filtro opcional por tipo de recurso.`get_network_request`Inspecciona una solicitud de red específica, incluyendo sus encabezados, cuerpo de la solicitud y datos de la respuesta.`take_screenshot`Captura una imagen de la página actual, la ventana gráfica, la página completa o un elemento específico.¡Fantástico! Esto confirma que `chrome-devtools-mcp` está correctamente configurado y que sus herramientas de automatización de navegador están disponibles para tu agente de IA. El paso final es verificar que puede usar esas herramientas para interactuar con una sesión de navegador remota mediante el Browser API de Bright Data. ### Paso #4: Probar Chrome DevTools for Agents + Browser API Para comprobar que Chrome DevTools for agents puede controlar la sesión configurada del Browser API, pruébalo contra un sitio web complejo protegido por medidas anti-bot, como Booking.com. Prueba la integración con una tarea real como esta: ```none Open the Booking.com page in a browser and search for hotels in Barcelona for two people from September 23 to 24. Apply the "4-star" filter and sort the results by lowest price. Extract the first 10 results with the hotel name, nightly price, rating, and review count. ``` Ejecuta el prompt, y esto es lo que deberías ver: ![Ejecución del prompt](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789552581424_11.gif)En particular, el agente Gemini CLI manejó la tarea de la siguiente manera: 1. Llamó a `navigate_page` para llegar a Booking.com. 2. Usó la herramienta `list_pages` para identificar la página de navegador disponible. 3. Utilizó una combinación de las herramientas `click` y `take_snapshot` para encontrar los elementos relevantes y seleccionar las fechas solicitadas. 4. Utilizó `evaluate_script` para realizar interacciones adicionales requeridas y llegar a la página de resultados objetivo. 5. Empleó `take_snapshot` de nuevo para inspeccionar la estructura de la página de resultados. 6. Usó `evaluate_script` para extraer los datos requeridos con un script JavaScript personalizado. 7. Devolvió los datos extraídos en una tabla. A continuación se muestra la salida producida por el agente: ![El resultado producido por el agente](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789551511817_image.png)Observa cómo los datos obtenidos coinciden estrechamente con los resultados mostrados directamente en Booking.com: ![Los resultados producidos por el agente coinciden con los disponibles en Booking.com](https://media.brightdata.com/2026/09/s_39D44E331C98C9D808460E91F2C05A672B8A25569CAEC32E56C6759D8D270907_1789551914832_image.png)Este sencillo ejemplo demostró que Chrome DevTools for agents, conectado mediante MCP a Gemini CLI, puede interactuar con Booking.com a través de una sesión remota del Browser API. Booking.com es un caso de prueba útil porque sus protecciones anti-bot hacen que la automatización de navegadores sea un desafío. En esta configuración, el Browser API gestiona la sesión del navegador y la infraestructura necesaria para acceder al sitio, mientras que `chrome-devtools-mcp` le da al agente de IA las herramientas que necesita para interactuar con el navegador. El resultado es un agente de IA que puede realizar interacciones complejas con el navegador sin que tengas que ejecutar y gestionar el navegador localmente. ¡Misión cumplida! ### Otros ejemplos posibles La combinación de `chrome-devtools-mcp` y el Browser API de Bright Data puede admitir muchos otros casos de uso de automatización de navegadores, depuración y extracción de datos. Aquí tienes algunos prompts que puedes probar para distintos escenarios: - **Extraer datos de solicitudes de red tras una interacción**: `Open a website, search for "web scraping," inspect the network requests generated when the results load, identify the request returning the search results, and extract the first 20 results from its response.` - **Inspeccionar respuestas de API**: `Open a product page, identify the network request returning its product data, inspect the request and response, and extract the product name, price, availability, and rating.` - **Analizar el rendimiento de la página**: `Open a website and analyze its performance. Report the page load time, largest contentful paint, cumulative layout shift, and other relevant performance metrics, then identify potential bottlenecks.` - **Depurar errores de JavaScript**: `Open a website, inspect the console for JavaScript errors and warnings, identify the affected scripts or pages, and explain the most likely causes based on the available debugging information.` Mediante `chrome-devtools-mcp`, tu agente no se limita a hacer clic en enlaces y leer el contenido de la página. En cambio, puede realizar inspección de consola, análisis de rendimiento, monitoreo de red y más. En comparación con soluciones como [Playwright MCP](/blog/ai/playwright-mcp-server), esto lo hace más apto para casos de uso que requieren una inspección y depuración más profunda del navegador. ## Conclusión En este artículo, aprendiste qué es Chrome DevTools for agents y cómo admite la automatización de navegadores mediante CDP. Específicamente, viste cómo combinarlo con el Browser API de Bright Data para permitir que tu agente de IA ejecute sesiones de navegador escalables basadas en la nube con capacidades anti-bot integradas. El resultado es una configuración de automatización de navegador controlada por IA que puede escalar a cargas de trabajo de nivel empresarial. Con la misma integración, también puedes construir flujos de trabajo de navegador agénticos respaldados por infraestructura de navegador en la nube. ¡Regístrate para obtener una cuenta de Bright Data y explora nuestras soluciones de scraping de datos web y automatización de navegadores listas para IA! Contactar ventasPrueba gratuita![google social icon](/wp-content/themes/brightdata/assets/images/ic_google.svg) Tabla de Contenidos [ ](https://news.ycombinator.com/submitlink?t=Permite+que+chrome-devtools-mcp+controle+navegadores+anti-detecci%C3%B3n+en+la+nube&u=https://brightdata.es/blog/ai/chrome-devtools-mcp-with-bright-data) [ ](https://www.linkedin.com/shareArticle?mini=true&title=Permite+que+chrome-devtools-mcp+controle+navegadores+anti-detecci%C3%B3n+en+la+nube&url=https://brightdata.es/blog/ai/chrome-devtools-mcp-with-bright-data) [ ](http://www.reddit.com/submit?title=Permite+que+chrome-devtools-mcp+controle+navegadores+anti-detecci%C3%B3n+en+la+nube&url=https://brightdata.es/blog/ai/chrome-devtools-mcp-with-bright-data) ## Usted también puede estar interesado en [ ![Audio Web Scraping for AI Processing](https://media.brightdata.es/2026/09/Audio-Web-Scraping-for-AI-Processing.png) ](https://brightdata.es/blog/datos-web/audio-web-scraping "Scraping de Audio Web para Procesamiento con IA: Tutorial Completo") [Datos web ![Antonello Zanini](https://media.brightdata.es/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### Scraping de Audio Web para Procesamiento con IA: Tutorial Completo Extrae audio a gran escala para procesamiento con IA usando Bright Data. Aprende conversión de formatos y transcripción con IA para resultados empresariales. 05-Oct-2026 18 min de lectura ](https://brightdata.es/blog/datos-web/audio-web-scraping) [ ![TrueFoundry Agent Harness with Bright Data MCP](https://media.brightdata.es/2026/08/TrueFoundry-Agent-Harness-with-Web-MCP.png) ](https://brightdata.es/blog/ai/trueforge-with-bright-data "Construyendo Agentes de IA de Producción con TrueForge + Bright Data MCP") [AI ![Satyam Tripathi](https://media.brightdata.es/2024/09/Satyam-Tripathi-50x50.png) Satyam Tripathi Technical Writer ### Construyendo Agentes de IA de Producción con TrueForge + Bright Data MCP Bright Data MCP le da a los agentes de TrueForge la capa de recuperación que el harness no proporciona, para que los subagentes lean sitios que bloquean el acceso automatizado. 04-Oct-2026 84 min de lectura ](https://brightdata.es/blog/ai/trueforge-with-bright-data) [ ![Web Scraping with GLM](https://media.brightdata.es/2026/09/Web-Scraping-with-GLM.png) ](https://brightdata.es/blog/ai/web-scraping-with-glm "Scraping web con GLM: Extracción de datos de texto y visuales") [AI ![Antonello Zanini](https://media.brightdata.es/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### Scraping web con GLM: Extracción de datos de texto y visuales Usa GLM-5.3 con el Web Unlocker de Bright Data para scraping web impulsado por IA. Extrae automáticamente datos de texto y visuales, eludiendo barreras comunes. 16-Sep-2026 7 min de lectura ](https://brightdata.es/blog/ai/web-scraping-with-glm)