Las Herramientas para desarrolladores de Chrome para agentes son un conjunto de herramientas que aportan 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 las 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 agentes y ayudar a tu agente de programación a controlar y, luego, inspeccionar un navegador Chrome en vivo.
Usa el paquete chrome-devtools-mcp para controlar y revisar un navegador Chrome activo desde tu agente de programació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 Chrome DevTools 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 preintegradas.
Antigravity
Las Herramientas para desarrolladores de Chrome para agentes vienen 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 Chrome DevTools 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 lo hace, 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.
Próximos pasos
Para personalizar tu configuración, consulta Configuración.