/ Directorio / Playground / dev-browser
← Todos los servidores ↗ GitHub
● Comunidad SawyerHood ⚡ Instantáneo

dev-browser

por SawyerHood · SawyerHood/dev-browser

Un skill de Claude que levanta un navegador con devtools que tu agente puede controlar — navegar, hacer clic, inspeccionar y capturar pantalla.

dev-browser proporciona a tu agente Claude un navegador sin interfaz gráfica orientado al desarrollo mediante prompts de skill. Envuelve un navegador basado en CDP con facilidades amigables para el agente: selectores estables, captura de pantalla en cada acción y snapshots del DOM listos para fragmentar. Ideal cuando necesitas un navegador pero no quieres configurar playwright de principio a fin.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por qué usarlo

Características clave

Demo en vivo

Cómo se ve en la práctica

listo

Instalación

Repositorio del autor · Documentación oficial de Skills de Claude

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.

Flujo
  1. Arrancar
    Use dev-browser. Open https://vercel.com/docs/functions. List the sidebar sections.✓ Copiado
    → Encabezados extraídos con URLs de anclaje
  2. 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
  3. 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
  1. Abrir
    Use dev-browser. Open https://staging.myapp.com, take a screenshot.✓ Copiado
    → Captura de la página de aterrizaje
  2. Iniciar sesión
    Click "Sign in", enter [email protected] / Test1234, submit.✓ Copiado
    → Panel post-login capturado
  3. 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

HerramientaEntradasCuándo llamarCoste
open_url url Navegar 0
click selector|text Interactuar 0
type selector, text Introducir texto 0
snapshot none Anclar en el estado actual 0

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

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

AlternativaCuándo usarlaContrapartida
playwright MCPQuieres un navegador persistente registrado como MCPMás configuración; el skill es más ligero
mcp-chromeNecesitas tu Chrome real con sesión iniciadaNo 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