dev-browser (Claude Skill) — Instalar & Demo en vivo

Por qué usarlo

Características clave

Navegador CDP como skill — sin configuración MCP adicional
Capturas de pantalla entre pasos para anclar visualmente
Snapshots del DOM adaptados para consumo por LLM (con conciencia del tamaño)
Funciona con Chromium; local o en contenedor
Licencia MIT

Demo en vivo

Cómo se ve en la práctica

listo

Instalar

Elige tu cliente

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

{
  "mcpServers": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

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

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

{
  "mcpServers": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

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": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "dev-browser-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ]
    }
  ]
}

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

~/.config/zed/settings.json

{
  "context_servers": {
    "dev-browser-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/SawyerHood/dev-browser",
          "~/.claude/skills/dev-browser"
        ]
      }
    }
  }
}

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

claude mcp add dev-browser-skill -- git clone https://github.com/SawyerHood/dev-browser ~/.claude/skills/dev-browser

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

Casos de uso

Usos del mundo real: dev-browser

Hacer investigación web rápida sin configurar un MCP

👤 Desarrolladores que no quieren Playwright en su configuración MCP ⏱ ~15 min beginner

Cuándo usarlo: Quieres que tu sesión de Claude Code navegue algo puntualmente sin comprometerte con un servidor de navegador persistente.

Requisitos previos

Skill instalado — git clone https://github.com/SawyerHood/dev-browser ~/.claude/skills/dev-browser
Chromium disponible — npx playwright install chromium descarga el binario

Flujo

Arrancar

Use dev-browser. Open https://vercel.com/docs/functions. List the sidebar sections.✓ Copiado

→ Encabezados extraídos con URLs de anclaje
Profundizar

Navigate to "Runtime" — read the page and summarize the three runtime options in one paragraph each.✓ Copiado

→ Tres párrafos con citas a fragmentos de URL
Capturar

Screenshot the pricing section for my notes.✓ Copiado

→ Captura guardada localmente

Resultado: Investigación hecha con un navegador cuando lo necesitabas, sin infraestructura permanente.

Errores comunes

Falta el binario de Chromium — Ejecuta npx playwright install chromium una vez

Combinar con: filesystem

Verificar un flujo de login en un entorno de staging

👤 Desarrolladores con mentalidad de QA antes de desplegar ⏱ ~5 min beginner

Cuándo usarlo: Antes de desplegar, quieres recorrer una vez el camino feliz crítico.

Flujo

Abrir

Use dev-browser. Open https://staging.myapp.com, take a screenshot.✓ Copiado

→ Captura de la página de aterrizaje
Iniciar sesión

Click "Sign in", enter [email protected] / Test1234, submit.✓ Copiado

→ Panel post-login capturado
Confirmar

Is the "Welcome, qa" string visible on the page?✓ Copiado

→ Sí/no + captura

Resultado: Un smoke test de 60 segundos antes de hacer clic en Desplegar.

Errores comunes

CAPTCHA en el login — Añade una vía de bypass solo para testing en staging; dev-browser no puede resolver captchas

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

dev-browser-skill + filesystem

Guardar capturas junto a las notas

After every step, screenshot into /notes/web-research/.✓ Copiado

dev-browser-skill + chrome-devtools

Cuando necesitas profundidad a nivel devtools, escala al MCP chrome-devtools

dev-browser gave me the page — now use chrome-devtools to check the network waterfall.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar
open_url	url	Navegar
click	selector\|text	Interactuar
type	selector, text	Introducir texto
snapshot	none	Anclar en el estado actual

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: N/A
Tokens por llamada: Snapshots del DOM con límite de tamaño; capturas en base64
Monetario: Gratuito
Consejo: Omite los snapshots cuando no sean necesarios — la captura sola suele ser suficiente

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Ninguno

Salida de datos: Directo a los sitios que navegas

No introduzcas credenciales reales en sitios durante sesiones controladas por el agente — usa cuentas de prueba

Resolución de problemas

Errores comunes y soluciones

Error: Executable doesn't exist at chromium path

npx playwright install chromium — el skill asume los binarios de Playwright

Selector no encontrado

Ejecuta snapshot primero; elige el selector del DOM real, no uno inventado

La página bloquea la automatización

El sitio detectó el modo sin interfaz — prueba ejecutar con headless=false en la configuración del skill

Alternativas

dev-browser vs otros

Alternativa	Cuándo usarla	Contrapartida
playwright MCP	Quieres un navegador persistente registrado como MCP	Más configuración; el skill es más ligero
mcp-chrome	Necesitas tu Chrome real con sesión iniciada	No es un navegador de prueba sin interfaz

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills