Conecta tu agente de IA directamente a tu instancia activa del navegador con la función de conexión automática. Esto permite que tu agente omita las limitaciones de la zona de pruebas heredando tus pestañas actuales, extensiones del navegador y el estado de la aplicación en vivo.
Heredar el contexto de tu flujo de trabajo permite que tu agente pase de escribir código a depurar el estado de tu navegador en vivo sin perder los datos de la sesión. Esto es útil cuando ya alcanzaste un estado específico de la aplicación (como un proceso de confirmación de compra complejo o un error reproducido manualmente) y quieres que tu agente se encargue de la investigación técnica sin volver a ejecutar esos pasos de forma manual.
Ten en cuenta lo siguiente antes de habilitar la conexión automática:
- Seguridad y privacidad: Cuando la conexión automática está activa, tu agente tiene acceso a todos los datos de tu perfil del navegador, incluidas las pestañas abiertas, el almacenamiento de sesión, el almacenamiento local, las cookies y otros datos que se muestran a través de las APIs de JavaScript.
- Garantía de privacidad de los datos: El servidor de Chrome DevTools para agentes es un proceso local y no envía a Google los datos de tu navegador, los tokens de sesión ni la telemetría.
- Confianza y mensajes: Usa este modo solo con los agentes en los que confíes y ten cuidado con la información que incluyas en los mensajes.
Requisitos previos
Antes de usar la función de conexión automática, asegúrate de tener lo siguiente:
- Chrome 144 y versiones posteriores: La conexión automática requiere protocolos de depuración modernos que se encuentran en las versiones actuales de Chrome.
- Canal de Chrome correcto: De forma predeterminada, tu agente se conecta a Chrome estable. Para usar Canary o Beta, especifica el canal en tu configuración.
- Depuración remota habilitada: Habilita manualmente el puente entre tu navegador y el agente.
- Configuración correcta: Debes actualizar la configuración del MCP para incluir la marca
--autoConnect. Consulta Configuración para obtener más detalles.
Cómo configurar la conexión automática
Para configurar la función de conexión automática en tu servidor de MCP, haz lo siguiente:
- En el navegador Chrome en ejecución, navega a
chrome://inspect/#remote-debuggingy habilita 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"] } } }Indícale a tu agente que interactúe con la app de Chrome que tienes abierta. Cuando Chrome te pida permiso para permitir la sesión, haz clic en Permitir.
Ahora tu agente usa el servidor de MCP para interactuar con tu aplicación de Chrome en ejecución. Para obtener más información sobre las opciones de configuración, consulta la guía de configuración.
Casos de uso de la conexión automática
La conexión automática te permite usar herramientas o estados que no se pueden usar en sesiones de Chrome en zona de pruebas. Por ejemplo, en lugar de pedirle a tu agente que acceda, lo que suele fallar, puedes navegar a la página por tu cuenta y acceder. Luego, pídele a tu agente que se haga cargo.
En las siguientes secciones, se incluyen algunos ejemplos de casos de uso de la función de conexión automática.
Cómo depurar paneles autenticados
Las herramientas internas y los paneles privados suelen estar protegidos por capas complejas de inicio de sesión único (SSO) o de red privada virtual (VPN). Por lo general, un navegador en zona de pruebas requiere un acceso que tu agente no puede omitir. Con la conexión automática, tu agente hereda tu sesión activa.
Ejemplo de instrucción:
I have my company's staging dashboard open in the next tab. Can you look at the
User Analytics chart, find the SVG element for the Friday data point, and tell
me why the tooltip isn't appearing on hover?
Ejemplo de ejecución del agente: Tu agente identifica tu proceso de Chrome existente, encuentra la pestaña activa y analiza el árbol de accesibilidad para ubicar los elementos. También puede usar APIs de JavaScript para evaluar conflictos específicos.
Cómo corregir en vivo la pestaña actual
Evita reproducir errores de forma manual. En lugar de traducir los pasos para reproducir el error en una nueva instrucción para un agente en zona de pruebas, puedes pedirle a tu agente que corrija el error en la página activa en la que ya lo encontraste.
Ejemplo de instrucción:
Look at the current page. The Submit button overlaps with the footer on this
screen size. Generate a fix for the layout and verify it by injecting the CSS
directly into this tab.
Ejemplo de ejecución del agente: Como está conectado a tu ventana activa, tu agente analiza tu diseño y aplica la corrección al instante. Verás que el botón se mueve en la pantalla, lo que confirma que la corrección funciona antes de que actualices el código fuente.