Las Herramientas para desarrolladores de Chrome para agentes son un conjunto de herramientas que incorporan la potencia de las Herramientas para desarrolladores de Chrome a tus flujos de trabajo de programación con IA. Si instalas las Herramientas para desarrolladores de Chrome para agentes, obtendrás acceso a lo siguiente:
- Servidor de MCP: Conecta tu agente de IA a una instancia de navegador activa con el Protocolo de contexto de modelo de código abierto.
- CLI de Herramientas para desarrolladores de Chrome: Es una interfaz para interactuar con el navegador directamente desde tu terminal.
- Habilidades de agente: Son instrucciones expertas que le enseñan a tu agente cómo coordinar varias herramientas para tareas complejas, como la accesibilidad o la depuración del rendimiento.
En el contexto del desarrollo web, las Herramientas para desarrolladores de Chrome para agentes integran capacidades de depuración en tu agente de IA.
Por ejemplo, un agente puede usar las herramientas para registrar y evaluar los registros de rendimiento para analizar el rendimiento de un sitio web y detectar posibles mejoras. Además del desarrollo web, las Herramientas para desarrolladores para agentes también permiten que tu agente navegue por la Web en vivo en lugar de solo recuperar HTML estático.
Configuración
En esta guía, se muestra cómo configurar las Herramientas para desarrolladores de Chrome para que los agentes ayuden a tu agente de programación a controlar y a inspeccionar un navegador Chrome en vivo.
Usa el paquete chrome-devtools-mcp para controlar y revisar un navegador Chrome activo desde tu agente de codificación (como Gemini, Claude, Cursor o Copilot). Ten en cuenta que, si bien las Herramientas para desarrolladores de Chrome para agentes proporcionan el conjunto completo de herramientas, la CLI solo admite un subconjunto específico para la automatización basada en shell.
IDE y modelos compatibles
Las Herramientas para desarrolladores de Chrome para agentes admiten cualquier herramienta o IDE que admita el protocolo de MCP. Esto incluye Antigravity, Gemini CLI, Claude Code, Cursor, Copilot y muchos más.
Consideraciones de seguridad
Como tu agente podrá ver las páginas a las que accede y también interactuar con ellas, podrá actuar en tu nombre de manera eficaz si lo conectas a un navegador con una sesión activa y autenticada. Evita compartir información personal o sensible que no quieras que vean los agentes.
Requisitos previos
Antes de instalar Herramientas para desarrolladores de Chrome para agentes, asegúrate de que tu entorno cumpla con los siguientes requisitos:
Para configurar las Herramientas para desarrolladores de Chrome para agentes, elige el método que coincida con tu entorno de programación preferido. Si bien algunos agentes requieren instalación manual, otros vienen con las herramientas integradas previamente.
Antigravity
Las Herramientas para desarrolladores de Chrome para agentes se incluyen preempaquetadas con Antigravity 2.0. Puedes comenzar a usarlo de inmediato con el agente secundario del navegador. Intenta usar un comando de barra, como los siguientes:
/browser Navigate to the Google homepage
Para acceder a las habilidades especializadas del agente, te recomendamos que instales el complemento de DevTools durante el paso Build with Google de la configuración inicial o en la configuración de la aplicación. Para obtener más información, consulta la documentación del subagente Antigravity Browser.
Instalación con la CLI
Para configurar las Herramientas para desarrolladores de Chrome para agentes, puedes usar un archivo de configuración JSON o un comando de CLI para instalar el servidor directamente si tu agente lo admite. Algunos agentes también ofrecen extensiones o complementos oficiales que incluyen habilidades del agente, instrucciones de expertos que ayudan a tu agente a usar las funciones de DevTools.
Si tu agente no aparece en la lista, puedes consultar cómo instalarlo en el repositorio de GitHub de Chrome DevTools for Agents.
Para agregar las Herramientas para desarrolladores de Chrome para agentes a un agente de línea de comandos, usa los comandos integrados de la CLI para tu agente específico:
Gemini CLI
Instala la extensión de Gemini CLI que incluye el paquete de MCP y las habilidades complementarias con el siguiente comando:
# Gemini extension (MCP+Skills)
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Instala solo el paquete de MCP con el siguiente comando:
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
Claude Code
Para instalar las Herramientas para desarrolladores de Chrome para agentes como un complemento de Claude Code, usa los siguientes comandos de barra en Claude Code. Agrega el registro del mercado:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
E instala el complemento desde el registro de Marketplace:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
Consulta la página oficial del complemento Claude de Herramientas para desarrolladores de Chrome para obtener más información.
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Instala con la configuración de JSON
En el caso de otros agentes que admitan la clave de configuración mcpServers, agrega esta entrada de forma manual y asegúrate de instalar DevTools para agentes a través de npm i
chrome-devtools-mcp.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
Instalar en otros agentes
Para configurar un agente que no aparece en la lista, consulta el repositorio de GitHub de MCP de Herramientas para desarrolladores de Chrome.
Pruebe su configuración
Ingresa la siguiente instrucción en tu agente para verificar que todo funcione correctamente:
Check the performance of https://developers.chrome.com
El agente debe abrir una ventana del navegador y registrar un seguimiento del rendimiento.
Soluciona problemas de configuración
Si tu agente no puede ejecutar herramientas y tiene acceso a las habilidades de las Herramientas para desarrolladores de Chrome, es posible que intente solucionar el problema automáticamente. Si no es así, puedes indicarle explícitamente al agente:
Use the Chrome DevTools troubleshooting skill to fix my setup.
También puedes ser más específico:
I'm having trouble with Chrome DevTools for agents. I tried to run [Tool Name]
but got the error: [Error Message]. I am on [OS Name]. Use the Chrome DevTools
troubleshooting skill to fix my setup.
Configuración avanzada
Estas son otras formas en que tu agente puede acceder al navegador.
Configura el modo sin interfaz gráfica
Si quieres realizar tareas en segundo plano sin una ventana del navegador visible, puedes ejecutar Chrome en modo sin interfaz gráfica (sin IU). Agrega la marca --headless a los argumentos del servidor:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless"
]
}
}
}
Conéctate a una sesión del navegador existente
De forma predeterminada, DevTools para agentes inicia una nueva instancia de Chrome. Sin embargo, puedes conectar tu agente a una sesión del navegador existente con la marca --autoConnect. Esto es especialmente útil si tu agente necesita investigar un problema que está protegido por un acceso o una sesión que ya iniciaste.
Existen dos formas de conectarse a una sesión existente:
Usa la conexión automática (Chrome 144 y versiones posteriores)
Cuando el servidor de MCP de las Herramientas para desarrolladores de Chrome se configura con la opción --autoConnect, el servidor de MCP se conectará a una instancia de Chrome activa y solicitará una sesión de depuración remota.
- En el navegador Chrome en ejecución, navega a
chrome://inspect/#remote-debuggingpara habilitar la depuración remota. Actualiza la configuración del MCP para incluir la marca
--autoConnect:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }Envía una instrucción a tu agente. Chrome mostrará un diálogo en el que se le solicitará al usuario permiso para permitir la sesión de depuración remota. Haz clic en Permitir.
Conéctate manualmente con el puerto de depuración remota
Si no puedes usar --autoConnect (por ejemplo, si ejecutas tu agente dentro de un entorno de zona de pruebas), puedes iniciar Chrome de forma manual con un puerto de depuración.
Este es un ejemplo (en macOS):
Inicia el navegador Chrome con el puerto de depuración remota habilitado. Por motivos de seguridad, también debes especificar un directorio de datos del usuario personalizado.
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stableConfigura tu agente para que se conecte con el parámetro
--browser-url:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }