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-mcpy 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“, 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).
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.
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. 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.
Browser API de Bright Data como solución
El Browser API de Bright Data 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, 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. 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, como Claude Code, OpenAI Codex, OpenCode y otros.
¡Sigue las instrucciones a continuación!
Requisitos previos
Antes de comenzar, asegúrate de tener:
Será útil tener conocimientos básicos sobre cómo funciona MCP y las herramientas expuestas por Chrome DevTools for agents.
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 para acceder al panel de control.
Luego, selecciona la opción “Web Access > Web Access API” en el menú de la izquierda:
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:
De lo contrario, haz clic en el desplegable del botón “Create API” y selecciona “Browser API”:
Esto abre el asistente de configuración del Browser API. Dale un nombre a tu Browser API y configúralo según tus necesidades:
Una vez que termines, haz clic en “Add API” para crear un Browser API. Luego, abre su página de detalles:
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:
wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222Para 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:
gemini mcp add --scope project chrome-devtools npx chrome-devtools-mcp@latest -- --wsEndpoint='wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@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:
Observa lo siguiente:
--scope projectconfigura el servidor MCP localmente, dentro de tu proyecto. Elimina esta opción si quieres configurar el servidor MCP de forma global.--wsEndpoint='wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222'indica achrome-devtools-mcpque 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. 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 en la carpeta de tu proyecto con esta configuración:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--wsEndpoint=wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222"
]
}
}
}Alternativamente, puedes crear este archivo manualmente.
Extra: También puedes configurar chrome-devtools-mcp en tu agente de IA preferido. Por ejemplo, en Claude Code, ejecuta:
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'¡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:
geminiLuego, ejecuta el comando /mcp para ver los servidores MCP disponibles:
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:
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:
En particular, el agente Gemini CLI manejó la tarea de la siguiente manera:
- Llamó a
navigate_pagepara llegar a Booking.com. - Usó la herramienta
list_pagespara identificar la página de navegador disponible. - Utilizó una combinación de las herramientas
clickytake_snapshotpara encontrar los elementos relevantes y seleccionar las fechas solicitadas. - Utilizó
evaluate_scriptpara realizar interacciones adicionales requeridas y llegar a la página de resultados objetivo. - Empleó
take_snapshotde nuevo para inspeccionar la estructura de la página de resultados. - Usó
evaluate_scriptpara extraer los datos requeridos con un script JavaScript personalizado. - Devolvió los datos extraídos en una tabla.
A continuación se muestra la salida producida por el agente:
Observa cómo los datos obtenidos coinciden estrechamente con los resultados mostrados directamente en Booking.com:
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, 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!
