Claude Code Chrome: que el agente compruebe la UI que toca
Claude Code Chrome: cómo hacer que el agente abra tu app en local, la recorra y lea la consola antes de decir listo. Requisitos, permisos y riesgos reales.
El agente termina. Te dice que ha refactorizado el formulario de registro, que los tipos compilan y que los tests unitarios pasan. "Listo".
Abres localhost:3000. El botón de enviar no hace nada. En la consola hay un TypeError en rojo que nadie ha leído, porque nadie ha abierto la página.
Ese hueco es el que cierra Claude Code Chrome: la integración que deja al agente abrir tu app en un navegador real, hacer clic, leer la consola y enseñarte lo que ha visto antes de cerrar la tarea. Sin ella, "listo" significa "compila". Con ella, puede significar "lo he probado".
En corto: Claude Code se conecta a Chrome o Edge mediante la extensión Claude in Chrome y se activa con claude --chrome o con /chrome. El agente puede navegar por tu app en local, interactuar con ella, leer errores de consola y peticiones de red, hacer capturas y grabar GIF. Úsalo para verificar mientras desarrollas, no como sustituto de tu suite E2E en CI.
¿Qué es la integración de Claude Code con Chrome?
La integración de Claude Code con Chrome es una conexión entre la CLI (o la extensión de VS Code) y la extensión de navegador Claude in Chrome que da al agente herramientas para controlar pestañas de tu navegador real mientras programa.
Según la documentación oficial de Claude Code con Chrome (consultada en octubre de 2026), las acciones se ejecutan en una ventana visible y en tiempo real. Claude abre pestañas nuevas, las agrupa en un grupo ligado a tu sesión y comparte el estado de login de tu navegador.
Esa última frase es la que importa. Volveremos a ella en los riesgos.
Cómo activar Claude Code Chrome: requisitos y comandos
Instala la extensión, inicia sesión con /login y arranca con claude --chrome. Estos son los requisitos que lista la documentación:
| Requisito | Detalle según la doc oficial |
|---|---|
| Navegador | Chrome o Edge. También detecta la extensión en Brave, Arc, Vivaldi y Opera |
| Extensión | Claude in Chrome 1.0.36 o posterior, desde la Chrome Web Store |
| Plan | Plan directo de Anthropic: Pro, Max, Team o Enterprise |
| Autenticación | Sesión con /login. Con API key o token de claude setup-token queda desactivada aunque pases --chrome |
| No soportado | WSL y proveedores de terceros como Amazon Bedrock, Google Cloud Agent Platform o Microsoft Foundry (necesitas una cuenta de claude.ai aparte) |
# Sesión con el navegador conectado
claude --chrome
# Dentro de la sesión: estado, permisos, reconectar o elegir navegador
/chrome
Funciona cuando /chrome muestra "Status: Enabled" y "Extension: Installed". Desde ese panel puedes marcar Enabled by default, aunque la doc avisa de que aumenta el consumo de contexto porque las herramientas del navegador quedan siempre cargadas. En VS Code, el gesto es escribir @browser seguido de la tarea.
Si la extensión no aparece a la primera, reinicia Chrome: la primera activación instala un archivo de native messaging host que el navegador solo lee al arrancar.
Qué puede hacer Claude Code en Chrome
Con Claude Code Chrome tienes todo lo que necesitas para verificar una UI: navegar, hacer clic, escribir, leer y documentar.
La doc oficial enumera depuración leyendo errores de consola y estado del DOM, verificación de diseño, pruebas de formularios y flujos de usuario, subida de archivos, capturas guardadas en disco y grabación de GIF. El artículo de ayuda de Claude in Chrome añade que lee la salida de la consola, incluidos errores, peticiones de red y estado del DOM.
Para la lista exacta de herramientas en tu versión, ejecuta /mcp, selecciona claude-in-chrome y entra en View tools. Esa es la fuente de verdad, por encima de cualquier post.
Cómo hacer que Claude Code verifique la UI antes de decir "listo"
Para que Claude Code verifique la UI, pide el cambio y la comprobación en el mismo prompt: qué URL abrir, qué flujo recorrer, qué errores de consola reportar y qué evidencia guardar. La tarea no termina cuando el código compila; termina cuando el agente ha visto la pantalla.
Con el servidor de desarrollo corriendo en otra terminal y la sesión arrancada con claude --chrome, pide el cambio y la verificación en el mismo prompt, con criterios concretos:
Cambia la validación del formulario de registro: email obligatorio
y password de mínimo 12 caracteres.
Cuando termines, abre localhost:3000/registro, envía el formulario
vacío y luego con un password de 5 caracteres. Comprueba que salen
los mensajes de error correctos. Revisa la consola y dime solo los
errores o warnings nuevos. Guarda en disco una captura del estado
final. No digas "listo" hasta haber hecho todo esto.
Dos detalles salen directamente de la documentación. Primero, recomienda decirle a Claude qué patrones buscar en la consola en lugar de pedirle toda la salida, porque los logs pueden ser muy verbosos. "Errores nuevos tras el cambio" es útil; "lee la consola" quema contexto.
Segundo, las capturas en disco y los GIF dejan evidencia revisable. Un GIF del flujo adjunto a la PR dice más que "lo he probado". Ojo: guardar capturas en disco requiere Claude Code v2.1.211 o posterior; antes, la opción no escribía el archivo.
Para que sea la norma, escríbelo en tu CLAUDE.md como parte de la definición de terminado de cualquier cambio de UI. Es la misma lógica que trabajamos en el curso Construye con IA: el agente no se autoaprueba, demuestra. Y si necesitas pasos deterministas que no dependan de la memoria del modelo, los hooks de Claude Code son la capa para eso.
Claude Code Chrome frente a tests E2E con Playwright
No compiten. Claude Code Chrome es verificación asistida mientras desarrollas; Playwright es una suite que se ejecuta igual en cada commit.
| Criterio | Claude Code + Chrome | Tests E2E con Playwright |
|---|---|---|
| Cuándo se usa | En local, justo después del cambio | En CI, en cada push o PR |
| Navegador | Tu Chrome real, con tus sesiones | Navegador aislado y reproducible |
| Qué se prueba | Lo que el agente decide a partir de tu prompt | Lo que fija el código del test |
| Repetibilidad | Baja: cada ejecución puede recorrer la app distinto | Alta |
| Coste de empezar | Un prompt | Escribir y mantener specs |
| Limitación / riesgo | Actúa con tus cookies; no sirve como gate de regresión | No detecta lo que nadie escribió como test |
En el hilo de Hacker News sobre el lanzamiento de Claude in Chrome, un usuario comentó que en sus primeras pruebas a Claude le resultaba más fácil de manejar que los servidores MCP de Playwright para QA web puntual, pero que no estaba pensado para E2E. También le pareció bastante más lento que otras extensiones de navegador con IA para tareas web generales. Es una impresión individual de diciembre de 2025, no un benchmark, pero encaja con la tabla.
Si buscas la otra mitad, la suite que vive en CI y se repara cuando cambia la UI, la tienes en tests E2E autoreparables con Playwright. Y si trabajas con Angular, la base de testing que no depende de ningún agente está en el curso de Testing en Angular con Jest y Testing Library.
Mi opinión: usa Chrome para que el agente no te entregue nada sin mirarlo, y convierte en test de Playwright cada flujo que hayas tenido que verificar más de dos veces.
Límites y riesgos de Claude Code con Chrome
Los riesgos de Claude Code Chrome vienen todos de lo mismo: trabaja en tu navegador, no en uno de laboratorio.
Tu sesión real, con tus cuentas iniciadas. Claude puede acceder a cualquier sitio en el que ya estés autenticado. El artículo de uso seguro de Claude in Chrome recomienda un perfil de navegador separado sin cuentas sensibles y avisa del prompt injection: instrucciones maliciosas ocultas en contenido web. Los clasificadores lo reducen, pero el riesgo no es cero.
En el mismo hilo de HN, otro usuario contó que Claude Code, al no encontrar una operación en la CLI ni en la API pública, abrió la app en Chrome, tomó sus tokens de las cookies y llamó con curl a la API privada.
Para verificar localhost, usa un perfil de Chrome solo para desarrollo.
Los GIF lo graban todo. La doc advierte de que la grabación captura todo lo visible, incluidos datos de cuenta en páginas con sesión iniciada. Revísala antes de pegarla en una PR pública.
Los permisos son por sitio y no siempre los controlas tú. Se heredan de la extensión y se gestionan en su configuración. En el issue #99007 de anthropics/claude-code, un usuario reporta que en subdominios internos de su empresa cada acción, capturas incluidas, pedía aprobación y no existía la opción de permitir siempre. Según su análisis, la extensión clasifica ciertos dominios como de aprobación obligatoria, y ni tus reglas de Claude Code ni el modo auto lo cambian. En un staging corporativo puede bloquearte.
Un alert() congela al agente. Según el troubleshooting oficial, los diálogos modales de JavaScript (alert, confirm, prompt) bloquean los eventos del navegador e impiden que Claude reciba comandos. Hay que cerrarlos a mano y decirle que continúe. Si tu app usa confirm() para borrar, ese flujo no lo recorre solo.
Además, ante un login o un CAPTCHA Claude se pausa y te pide que lo resuelvas tú, y en sesiones largas el service worker de la extensión puede quedarse inactivo y cortar la conexión. El patrón general de por qué los agentes fallan en el navegador está en agentes de IA en el navegador: por qué se rompen.
Cómo empezar hoy con Claude Code Chrome
Crea un perfil de Chrome solo para desarrollo, instala la extensión y añade una línea a tu CLAUDE.md: ningún cambio de UI se da por terminado sin abrir la página en local, recorrer el flujo afectado y reportar los errores nuevos de consola.
Una línea que convierte "compila" en "lo he visto funcionar". Si quieres ver flujos así en vídeo, los publico en el canal de YouTube de Dominicode.
Preguntas frecuentes
¿Qué necesito para usar Claude Code con Chrome?
Chrome o Edge (Claude Code también detecta la extensión en Brave, Arc, Vivaldi u Opera, aunque el centro de ayuda de Claude in Chrome no los da como soportados), la extensión Claude in Chrome 1.0.36 o posterior, Claude Code y un plan directo de Anthropic (Pro, Max, Team o Enterprise), con la sesión iniciada mediante /login. Con una API key o un token de claude setup-token, la integración queda desactivada.
¿Cómo activo Chrome en Claude Code?
Arranca con claude --chrome o ejecuta /chrome dentro de la sesión. Ese comando también sirve para ver el estado, gestionar permisos, reconectar la extensión y activarla por defecto. En VS Code, escribe @browser seguido de la tarea.
¿Sustituye Claude Code Chrome a mis tests E2E con Playwright?
No. Chrome sirve para que el agente verifique lo que acaba de cambiar, en tu navegador real. Playwright ejecuta la misma suite de forma reproducible en CI y bloquea regresiones. Usa los dos.
¿Por qué Claude deja de responder en el navegador?
Lo más habitual, según la documentación, es un diálogo alert, confirm o prompt abierto en la página. Ciérralo a mano y dile que continúe. Si no es eso, pídele una pestaña nueva o ejecuta /chrome y elige "Reconnect extension".
Por Bezael Pérez — Developer senior con más de 15 años de experiencia y fundador de Dominicode.
¿Quieres construir con agentes en serio?
Curso «Construye con IA» con Claude Code, de la idea al producto.
Developer con más de 15 años en frontend y creador de Dominicode. Escribe sobre IA aplicada al desarrollo de software.
¿Te resultó útil este artículo?
Compártelo con tu comunidad y ayuda a otros desarrolladores.