Claude Code abre Chrome y depura tu frontend por ti

Cuando Claude Code te ayuda con frontend pero no puede ver lo que estás depurando, te quedas explicándole bugs por escrito. Hay un atajo: dejar que abra el navegador él mismo.

TL;DR claude --chrome o /chrome conecta Claude Code con tu navegador. Desde ahí, Claude abre pestañas, navega, hace click, lee la consola y depura tu frontend — todo sin salir de la terminal.

Claude Code Chrome

Claude Code se integra con la extensión Claude in Chrome para darte automatización del navegador directamente desde la CLI. Lanzas tu app, le pides que la pruebe, y Claude abre Chrome, navega a tu localhost, interactúa con formularios, lee errores de consola y te dice qué está roto — con acceso al DOM real y al estado de login de tu navegador.

Es fascinante verlo trabajar: abre pestañas, hace scroll, lanza modales, escribe términos de búsqueda y compila el resultado. Todavía a veces es lento. Todavía a veces falla. Pero la palabra clave es todavía. Esto mejora con cada versión, y la dirección es clara.

Resultado:

> claude --chrome

Chrome integration enabled

> Abre localhost:3000, rellena el formulario de registro
  con datos inválidos y dime si los mensajes de error
  aparecen correctamente

⏺ Opening new tab → localhost:3000
  Clicking "Sign up"...
  Typing invalid email...
  Form submitted — 3 validation errors detected:
  - Email format invalid
  - Password too short
  - Terms not accepted

"Claude started debugging this browser": qué es ese aviso

La primera vez que Claude toca el navegador, Chrome saca una barra en todas las pestañas abiertas, no solo en la que Claude está usando, y se queda ahí mientras la sesión siga enganchada.

No es una alerta sobre Claude. Es lo que Chrome enseña con cualquier extensión que se conecte por la API chrome.debugger, el mismo Chrome DevTools Protocol que habla tu panel de DevTools. Claude Code maneja el navegador a través de la extensión Claude in Chrome, esa extensión se engancha por CDP, y la barra salta.

La plantilla está en el propio paquete de recursos de Chrome:

"$1" started debugging this browser

Así que lo que ves es "Claude" started debugging this browser, con las comillas alrededor del nombre de la extensión. Con Chrome en español la cadena las pierde: Claude empezó a depurar este navegador.

Dos cosas que conviene saber:

No ha fallado nada. El aviso es informativo. Sale con la primera acción en el navegador y se queda hasta que el debugger se suelta.
No está documentado. La página oficial de la integración con Chrome trae sección de troubleshooting y tabla de errores comunes, y la barra no aparece en ninguna de las dos. La issue #69287 pedía una forma nativa de quitarlo y se cerró como not planned, así que el arreglo es cosa tuya.

Cómo quitar el aviso

Arranca Chrome con el flag de silencio. Chrome trae un switch que suprime la barra para las sesiones de debugger de extensiones:

open -a "Google Chrome" --args --silent-debugger-extension-api

Cierra Chrome del todo antes (Cmd+Q, no vale con cerrar la ventana) o el flag no hace nada. Se aplica por arranque, así que si abres Chrome desde el Dock vuelve la barra.

Hasta dónde lo he comprobado, para que sepas qué te llevas: el switch sí viene en el binario de Chrome 150, y pasándolo así sí llega al proceso del navegador (lo he leído del proceso en marcha con un perfil desechable). Lo que no he verificado es que silencie la barra, porque eso pide la extensión enganchada en una sesión real. Que la quite es lo que reporta la gente, no algo que yo haya visto.

O instala la extensión por política. Las extensiones instaladas con la política de empresa ExtensionInstallForcelist no levantan la barra. Cuesta más montarlo, pero aguanta reinicios y no depende de cómo arranques Chrome.

Un aviso antes de silenciarlo: esa barra es la única señal visible de que algo tiene acceso completo de DevTools a tu navegador, con tus cookies y todas tus sesiones abiertas. Quitarla es razonable en una máquina donde sabes qué hay enganchado. En una compartida es mala idea.

Cómo configurarlo

1. Requisitos previos

Google Chrome o Microsoft Edge
Extensión Claude in Chrome v1.0.36+
Claude Code v2.0.73+
Plan directo de Anthropic (Pro, Max, Teams o Enterprise)

2. Lanzar con Chrome

claude --chrome

O dentro de una sesión existente:

/chrome

3. Activar por defecto (opcional)

Ejecuta /chrome y selecciona "Enabled by default" para no pasar --chrome en cada sesión. Ten en cuenta que esto aumenta el consumo de contexto al cargar siempre las herramientas del navegador.

Referencia

Capacidad	Qué hace
Live debugging	Lee errores de consola y estado del DOM, luego arregla el código
Design verification	Construye UI y la compara visualmente en el navegador. Combínalo con el Frontend Design Skill para que la UI que vas a depurar no sea AI slop genérica
Web app testing	Prueba formularios, flujos de usuario y regresiones visuales
Authenticated apps	Interactúa con Google Docs, Gmail, Notion — usa tu sesión activa. Si dudas entre esto y Chrome DevTools MCP, aquí tienes el mapa
Data extraction	Extrae datos estructurados de webs y los guarda localmente
Task automation	Automatiza entrada de datos, formularios y workflows multi-site
Session recording	Graba interacciones como GIF para documentar o compartir

Comando	Acción
`claude --chrome`	Lanza Claude Code con Chrome habilitado
`/chrome`	Activa/gestiona Chrome dentro de una sesión

Esto es la vía de la CLI. En Desktop hay un navegador dentro de la propia app que no necesita extensión, aunque tampoco tiene tus logins.

Documentación oficial: Use Claude Code with Chrome (beta)