Browser Tools MCP — Casos de uso, Instalar & Demo en vivo

Name: Browser Tools MCP Server
Author: AgentDeskAI

Por qué usarlo

Características clave

Lee TU Chrome, no uno sin interfaz — autenticación iniciada, extensiones, cookies
Registros de consola, solicitudes de red, inspección de elementos seleccionados
Auditorías integradas: rendimiento estilo Lighthouse, a11y, SEO, Mejores Prácticas, Next.js
Todos los datos se quedan locales — sin viajes a la nube

Demo en vivo

Cómo se ve en la práctica

browser-tools.replay ▶ listo

0/0

Instalar

Elige tu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "browser-tools",
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  ]
}

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

{
  "context_servers": {
    "browser-tools": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@agentdeskai/browser-tools-mcp@latest"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

claude mcp add browser-tools -- npx -y @agentdeskai/browser-tools-mcp@latest

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: Browser Tools

Depura un bug de front-end en vivo usando consola real + contexto de red

👤 Ingeniera/os frontend ⏱ ~15 min intermediate

Cuándo usarlo: Un bug solo se reproduce en tu sesión actual (iniciada sesión, datos específicos). Quieres que el agente lea la consola y la pestaña de red.

Requisitos previos

Extensión de Chrome instalada + servidor bridge en ejecución — Instala la extensión desde la página de releases, luego npx @agentdeskai/browser-tools-server@latest en una terminal
Servidor MCP conectado a tu cliente — npx -y @agentdeskai/browser-tools-mcp@latest

Flujo

Reproduce el bug con DevTools abierto

Abre la página afectada en Chrome con la extensión activa. Desencadena el bug. No cierres la pestaña.✓ Copiado

→ Bug visible, el icono de la extensión muestra que está capturando
Extrae contexto hacia el agente

Obtén los últimos 50 mensajes de consola y cualquier solicitud de red fallida. Resume lo que la página está gritando.✓ Copiado

→ Errores específicos con stack traces
Diagnostica y propón una solución

Basándote en los errores, señala el archivo/línea probablemente responsable. Si hay 404s, identifica la URL mala; si hay errores JS, la causa raíz.✓ Copiado

→ Hipótesis concreta con evidencia

Resultado: Un bucle de depuración donde el agente tiene el mismo contexto que abrir DevTools — más rápido que leer una descripción de captura de pantalla.

Errores comunes

Servidor bridge no en ejecución, MCP silenciosamente devuelve datos vacíos — Siempre verifica que curl localhost:3025/identity responda primero; el bridge debe estar en ejecución antes de la llamada MCP
Capturando desde la pestaña incorrecta — La extensión captura la pestaña activa. Haz clic en la pestaña correcta antes de preguntarle al agente

Combinar con: sentry

Ejecuta una auditoría estilo Lighthouse en la página que estás viendo

👤 Ingeniera/os frontend / SEO / a11y ⏱ ~10 min beginner

Cuándo usarlo: Quieres auditar una página tal como se renderiza en tu sesión (no un rastreador limpio).

Flujo

Abre la página de destino

Navega a <URL> en Chrome con la extensión activa.✓ Copiado

→ Página cargada
Ejecuta el modo auditoría

Ejecuta la herramienta de auditoría — rendimiento, a11y, SEO, mejores prácticas. Resume los 5 principales problemas con sugerencias de solución.✓ Copiado

→ Lista de problemas priorizada
Enfócate

Para los fallos de accesibilidad, enumera los selectores exactos y la regla WCAG violada.✓ Copiado

→ Pasos de remediación accionables

Resultado: Una auditoría completa sin salir de tu navegador, limitada al estado del usuario real.

Errores comunes

Las auditorías de páginas con puerta de autenticación fallan porque la herramienta navega de nuevo — Usa las herramientas elemento/consola del modo depurador en la página ya cargada en lugar de la auditoría completa

Inspecciona y explica un elemento específico

👤 Devs frontend, diseñadora/es ⏱ ~5 min beginner

Cuándo usarlo: Algo se ve mal en un componente. Quieres un rápido 'qué CSS se aplica y por qué' sin profundizar.

Flujo

Selecciona el elemento en DevTools

Abre DevTools, haz clic en el inspector de elementos, selecciona el elemento ofensivo.✓ Copiado

→ Elemento resaltado en el panel Elementos
Pídele al agente que inspeccione

Obtén los estilos calculados del elemento seleccionado, reglas heredadas y caja delimitadora. Explica por qué se renderiza de esa manera.✓ Copiado

→ Explicación basada en la cascada CSS real
Propón una solución

Sugiere el cambio CSS más pequeño para lograr [visual deseado]. Muestra la regla antes/después.✓ Copiado

→ Sugerencia de diff mínimo

Resultado: Depuración CSS a velocidad de conversación.

Errores comunes

La selección de elemento no persiste — el agente ve uno diferente — Reselecciona el elemento justo antes de preguntar; no dejes que el panel DevTools cambie el enfoque entre mensajes

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

browser-tools + sentry

Reproduce un error de Sentry en TU navegador y extrae contexto de consola en vivo

El problema de Sentry WEB-3a91 dice que un XHR a /api/checkout devuelve 500. Navega a la página en mi Chrome, reproduce y captura la consola + red.✓ Copiado

browser-tools + playwright

browser-tools para depuración en vivo, Playwright para reproducciones repetibles después

Encontré el bug en mi Chrome en vivo a través de browser-tools. Ahora escribe una prueba de Playwright que reproduzca la secuencia exacta de clics.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Cuándo llamar	Coste
takeScreenshot	Captura visual del estado actual	free
getConsoleLogs / getConsoleErrors	Depura cualquier error JS	free
getNetworkLogs / getNetworkErrors	Diagnostica llamadas API fallidas	free
getSelectedElement	El usuario ha seleccionado un elemento en DevTools	free
runAccessibilityAudit	Revisión a11y de la página actual	free
runPerformanceAudit	Auditoría de rendimiento de la página actual	free
runSEOAudit	Revisión SEO	free
runBestPracticesAudit	Revisión general de calidad de código	free
runNextJSAudit	Estás en Next.js	free
wipeLogs	Limpia entre sesiones de investigación	free

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Ninguno — todo local
Tokens por llamada: Los volcados de registros pueden ser grandes (5k+ tokens). Usa wipeLogs entre sesiones.
Monetario: Gratuito, código abierto
Consejo: Limpia registros antes de cada investigación — evita incorporar ruido no relacionado

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Ninguno — se ejecuta contra tu sesión de Chrome existente

Salida de datos: Solo a localhost:3025 (el bridge). Nada deja tu máquina excepto a través de lo que haga el agente/cliente MCP.

La extensión tiene acceso a los datos de tu navegador por diseño. Solo instala desde releases oficiales. Revisa el código antes de otorgar permisos.

Resolución de problemas

Errores comunes y soluciones

Todas las herramientas devuelven vacío / 'no conectado'

El servidor bridge no está en ejecución. Inícialo: npx @agentdeskai/browser-tools-server@latest en una terminal dedicada.

Verificar: curl http://localhost:3025/identity

Icono de extensión gris / inactivo

Haz clic en el icono de la extensión, confirma que dice 'Conectado'. Si no, recarga la pestaña.

Las auditorías fallan con tiempo de espera agotado

Algunas auditorías necesitan tiempo extra en páginas pesadas. Cierra otras pestañas para liberar CPU; vuelve a ejecutar.

Pestaña incorrecta capturada

La extensión captura la pestaña que fue activada por última vez. Haz clic en la pestaña correcta inmediatamente antes de llamar una herramienta.

Alternativas

Browser Tools vs otros

Alternativa	Cuándo usarla	Contrapartida
chrome-devtools MCP	Quieres acceso directo a CDP sin una extensión de navegador	No se necesita extensión pero pierdes contexto de sesión de usuario real
Playwright MCP	Necesitas automatización repetible, no depuración en vivo	Navegador limpio — no puedes ver tu sesión iniciada

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills