browser-inspector-mcp

Proporciona a tu herramienta de codificación de IA la misma visibilidad de CSS que tienes en las DevTools del navegador.

Antes de que tu IA escriba CSS, deja que vea lo que realmente hay en el navegador: los nombres de clase renderizados reales, la cascada completa de reglas, qué está ganando y por qué. Los mismos datos que obtiene un humano de las DevTools. Cero copiar y pegar manual.

Documentación completa y visuales →

Requisitos: Node.js 18+, una herramienta de IA compatible con MCP (Claude Code, Cursor, Windsurf, Cline, etc.), un servidor de desarrollo local en ejecución.

Configuración (añadir al archivo de configuración MCP de tu herramienta de IA):

{
  "mcpServers": {
    "browser-inspector": {
      "command": "npx",
      "args": ["-y", "browser-inspector-mcp"]
    }
  }
}

Ubicaciones de los archivos de configuración:

• Claude Code: ~/.claude.json

• Cursor: ~/.cursor/mcp.json o .cursor/mcp.json

• Windsurf: ~/.codeium/windsurf/mcp_config.json

• Otros: donde sea que tu herramienta lea la configuración del servidor MCP

Reinicia tu herramienta de IA. En la primera llamada, dile a tu IA en qué URL se está ejecutando tu servidor de desarrollo; la sesión del navegador persiste durante el resto de la conversación.

Una herramienta, cuatro acciones: browser_inspect con action: "dom" (DOM renderizado), "styles" (cascada CSS completa), "diff" (verificación antes/después), "screenshot" (instantánea visual). O simplemente describe lo que necesitas: Claude elige la acción correcta.

En el primer uso, Puppeteer descarga Chromium (~170MB).

Antes de empezar — lo que necesitas

Esta herramienta conecta dos cosas que ya debes tener configuradas: una herramienta de codificación de IA y un proyecto web en el que estés trabajando activamente. Aquí te explico qué significa cada una y cómo obtenerlas.

1. Node.js (el motor que ejecuta esta herramienta)

Node.js es un programa que permite a tu computadora ejecutar JavaScript fuera de un navegador. npm y npx —los comandos utilizados para instalar y ejecutar esta herramienta— vienen incluidos con Node.js.

¿Ya lo tienes? Abre la Terminal (Mac) o el Símbolo del sistema (Windows) y escribe:

node --version

Si ves un número de versión como v20.11.0, estás listo. Si recibes un error, necesitas instalarlo.

Instálalo: Descárgalo desde nodejs.org — obtén la versión LTS (la etiquetada como "Recomendada para la mayoría de los usuarios"). Ejecuta el instalador. Eso es todo.

2. Una herramienta de codificación de IA

Esta es la herramienta en la que escribes cuando le pides a la IA que escriba o corrija código. Este servidor MCP funciona con cualquiera de las siguientes — solo necesitas una:

Si aún no tienes una y no estás seguro de por dónde empezar: prueba Cursor. Tiene la curva de aprendizaje más suave si vienes de un entorno de diseño.

3. Qué es MCP (en una frase)

MCP (Model Context Protocol) es una forma estándar de dar a las herramientas de IA acceso a capacidades adicionales, como un navegador, una base de datos o tu sistema de archivos. Esta herramienta es una de esas capacidades. La instalas añadiendo unas pocas líneas de configuración a tu herramienta de IA, y aparece automáticamente en la caja de herramientas de tu IA.

4. Un proyecto web ejecutándose localmente

Esta herramienta inspecciona CSS en un navegador en vivo. Eso significa que necesitas un proyecto web ejecutándose en tu computadora, generalmente una aplicación de React, Vue o similar que estés desarrollando activamente.

Cuando ejecutas tu proyecto localmente, se abre en una dirección como http://localhost:5173 o http://localhost:3000. Esa es la URL que le darás a esta herramienta.

Si no tienes un proyecto local, esta herramienta no tendrá nada que inspeccionar. Está diseñada para flujos de trabajo de desarrollo activo, no para inspeccionar sitios web públicos en vivo.

Cómo instalar

No necesitas instalar nada por adelantado. Cuando configures tu herramienta de IA (siguiente paso), descargará y ejecutará browser-inspector-mcp automáticamente la primera vez que sea necesario usando una herramienta llamada npx.

La primera vez que se ejecuta, también descargará un navegador llamado Chromium (~170MB). Este es el navegador sin interfaz (headless) que la herramienta utiliza para inspeccionar tu página; se ejecuta de forma invisible en segundo plano y no tiene nada que ver con tu Chrome o Safari habitual.

Cómo configurar tu herramienta de IA

Necesitas añadir una pequeña pieza de configuración —un bloque JSON— a un archivo en tu computadora. JSON es solo un formato de texto estructurado. El bloque se ve así:

{
  "mcpServers": {
    "browser-inspector": {
      "command": "npx",
      "args": ["-y", "browser-inspector-mcp"]
    }
  }
}

El archivo al que lo añades depende de qué herramienta de IA estés usando. Encuentra la tuya a continuación.

Importante: Si el archivo de configuración ya tiene otro contenido, estás añadiendo a él, no reemplazándolo. Mira los ejemplos a continuación.

Claude Code

Ubicación del archivo: ~/.claude.json

El ~ significa tu carpeta de usuario. En un Mac, eso es /Users/tunombre/. Es posible que el archivo aún no exista; si no es así, créalo.

Abre la Terminal y ejecuta:

open -e ~/.claude.json

Esto abre el archivo en TextEdit. Si el archivo no existía, crea uno nuevo y pega:

{
  "mcpServers": {
    "browser-inspector": {
      "command": "npx",
      "args": ["-y", "browser-inspector-mcp"]
    }
  }
}

Si el archivo ya tiene contenido, busca la sección "mcpServers" y añade el bloque "browser-inspector" dentro de ella. No borres lo que ya está allí.

Guarda el archivo, luego cierra y vuelve a abrir Claude Code.

Cursor

Ubicación del archivo: ~/.cursor/mcp.json (se aplica a todos tus proyectos) o .cursor/mcp.json dentro de una carpeta de proyecto específica (se aplica solo a ese proyecto)

En Cursor, ve a: Settings → MCP — generalmente hay una interfaz de usuario para añadir servidores MCP directamente, lo cual es más fácil que editar el archivo manualmente. Si prefieres editar el archivo, añade el mismo bloque JSON de arriba.

Reinicia Cursor después de guardar.

Windsurf

Ubicación del archivo: ~/.codeium/windsurf/mcp_config.json

Abre el archivo, añade el mismo bloque JSON, guarda y reinicia Windsurf.

Cline (extensión de VS Code)

En VS Code con Cline instalado: abre la barra lateral de Cline → haz clic en el icono de configuración → busca "MCP Servers" → añade un nuevo servidor con el comando npx y los argumentos ["-y", "browser-inspector-mcp"].

Otras herramientas (Continue, OpenCode, Codex, etc.)

Cualquier herramienta compatible con MCP acepta el mismo bloque de configuración. Encuentra dónde almacena tu herramienta la configuración del servidor MCP y añádelo allí.

Cómo usarlo

Una vez configurado, las herramientas están disponibles automáticamente. No las llamas por su nombre, simplemente describe en qué estás trabajando.

Iniciando una sesión: Dile a tu IA en qué URL se está ejecutando tu servidor de desarrollo:

I'm working on the dashboard at http://localhost:5173 — the button styles aren't applying correctly.

La IA utilizará las herramientas que necesite. La sesión del navegador permanece abierta durante toda la conversación; solo necesitas mencionar la URL una vez.

Lo que hace la IA detrás de escena:

You:  "The icon in the panel header isn't picking up the brand color"

AI:   → browser_inspect(action="dom", selector=".panel-header")
        sees the real rendered class names, finds the icon is <span class="panel__header-icon">
      → browser_inspect(action="styles", selector=".panel__header-icon", properties=["color"])
        sees there's an explicit color rule on the icon overriding the parent
      → fixes the right rule, first try

Sin DevTools. Sin copiar y pegar. Sin ir y venir.

El problema que esto resuelve

Lo que sucede normalmente

Le pides a tu herramienta de IA que solucione un problema de estilo. Lee los archivos fuente, escribe un cambio de CSS y lo aplica. Revisas el navegador. Sigue estando mal. La IA intenta de nuevo. Sigue estando mal. Después de algunas rondas, abres las DevTools tú mismo, encuentras el elemento real, copias el HTML, lo pegas de nuevo en el chat, y solo entonces la IA entiende con qué estaba tratando realmente.

¿Ese paso manual de copiar y pegar? Esa es la brecha que esta herramienta cierra.

Por qué sigue sucediendo

La IA lee archivos fuente. Los navegadores renderizan algo diferente.

Las bibliotecas de componentes modernas como Ant Design, Material UI y Radix generan sus propios nombres de clase en tiempo de ejecución, nombres que no aparecen en ninguna parte de tu código fuente. Tu JSX dice <Menu>. El navegador renderiza ant-dropdown-menu-item-container. La IA escribe CSS para ant-menu-item porque eso es lo que encontró en la fuente. La regla nunca se aplica.

También hay un segundo problema: incluso cuando la IA apunta al elemento correcto, no puede confirmar si su cambio tuvo efecto. ¿Se aplicó el CSS? ¿Algo lo anuló? ¿font-weight ya estaba en negrita, o solo aparecía así? Sin DevTools, cada respuesta es una suposición.

Tres formas en que esto se desarrolla

Problema 1 — Leer la receta, no el plato

Un sastre estudia el patrón de diseño original de un traje: la plantilla de papel plana. Conoce cada costura. Pero el traje que tiene delante fue hecho por otra persona que hizo modificaciones. El patrón no es lo que se construyó.

Eso es la IA leyendo archivos fuente CSS. Está leyendo el patrón original. El navegador renderizó algo diferente. La IA sigue alterando la costura incorrecta.

El inspector es el probador. Compruebas lo que realmente se construyó antes de tocarlo.

Problema 2 — Ajustar la antena aérea

Estás en el patio trasero ajustando una antena de TV. Alguien dentro está viendo la imagen. Cada vez que la mueves, gritas "¿mejor o peor?" y esperas. Cada ajuste es un viaje de ida y vuelta.

Ese es el ciclo de empujar-verificar-empujar. La IA hace un cambio. Caminas al navegador. Miras. Vuelves y escribes lo que viste. Cada bucle es un viaje de ida y vuelta sin conexión directa entre la persona que sostiene la antena y la persona que mira la pantalla.

Esta herramienta es el cable. La IA verifica el resultado por sí misma, sin que tengas que caminar de un lado a otro.

Problema 3 — Tratar al paciente equivocado

Un médico ve a alguien que parece pálido y cansado. Sin examinarlo, asume deficiencia de hierro y prescribe en consecuencia. Seis semanas después, nada ha cambiado. Era la tiroides todo el tiempo.

La IA mira texto que parece en negrita en una captura de pantalla. Asume que font-weight está configurado alto. Intenta anularlo. Pero el valor era 400; el texto simplemente se renderizó así a ese tamaño. La IA pasó la sesión resolviendo un problema que no existía.

Inspecciona antes de prescribir. El valor calculado es el examen.

Para quién es

Diseñadores que usan herramientas de codificación de IA — Cursor, Claude Code, Windsurf, Cline. Piensas y verificas visualmente. Abrir DevTools y pegar HTML de nuevo en un chat es un cambio de contexto discordante que rompe tu flujo. Esto elimina ese paso por completo.

Ingenieros frontend que quieren que su programador de IA en pareja cierre el ciclo por sí mismo —inspeccionar, cambiar, verificar— sin necesidad de ser guiados a través de lo que el navegador está renderizando realmente.

Colaboradores de sistemas de diseño que trabajan con bibliotecas de componentes donde los nombres de clase en tiempo de ejecución no coinciden con la fuente. Ant Design, Material UI, Radix, Shadcn — cualquier lugar donde el navegador construya una estructura diferente a la que hay en el JSX.

Cualquiera que depure CSS que alguna vez haya dicho "¿por qué no se aplica esto?" y haya deseado que la IA pudiera simplemente mirar el navegador en lugar de adivinar.

Funciona junto a claude --chrome

La integración claude --chrome de Anthropic permite a Claude Code navegar, hacer clic, rellenar formularios y tomar capturas de pantalla en tu navegador en vivo. browser-inspector-mcp hace algo diferente: lee la cascada CSS: qué regla está ganando, de dónde vino, por qué un estilo no se está aplicando.

Son para trabajos diferentes. Un buen flujo de trabajo: usa claude --chrome para navegar al estado que deseas inspeccionar, luego usa browser-inspector-mcp para depurar el CSS. Ninguna herramienta reemplaza a la otra.

Una herramienta, cuatro acciones

dom — Mira lo que el navegador realmente construyó

Antes de que la IA escriba cualquier CSS, llama a esto. Devuelve el HTML renderizado real —nombres de clase reales en tiempo de ejecución, estructura DOM real— para cualquier elemento al que apuntes.

Este es el probador. La IA comprueba lo que realmente se construyó antes de tocarlo.

styles — Mira cada regla CSS y quién está ganando

Cuando un cambio de estilo no aparece, esto devuelve la cascada CSS completa para un elemento: cada regla que coincidió, en orden, de dónde vino (hoja de estilos + número de línea), y qué propiedades están activas frente a anuladas.

También sube hasta 4 niveles de elementos ancestros y devuelve sus estilos calculados críticos para el diseño: desbordamiento (overflow), dimensionamiento, contexto flex. Útil cuando la restricción no está en el elemento en sí, sino en un padre.

La IA puede ver si tu regla siquiera llegó al elemento, si algo la está anulando y exactamente dónde está definida la regla ganadora.

diff — Confirma que un cambio realmente tuvo efecto

Comparación de estilos antes/después. La primera llamada guarda una instantánea. La segunda llamada —después de un cambio de CSS— muestra exactamente qué propiedades cambiaron y en cuánto. Si no cambió nada, lo dice explícitamente.

Así es como la IA sabe que su corrección funcionó sin que tú revises el navegador manualmente.

screenshot — Instantánea visual de cualquier elemento

Devuelve una captura de pantalla recortada de cualquier elemento. La IA recibe la imagen en línea y puede ver con qué está trabajando.

Nota sobre la precisión de la captura de pantalla: Las capturas de pantalla se renderizan a 1440×900 en un navegador sin interfaz. Si tu aplicación tiene puntos de interrupción (breakpoints) responsivos, es posible que la captura de pantalla no coincida con lo que ves en tu propio