/ Diretório / Playground / dev-browser
← Todos os servidores ↗ GitHub
● Comunidade SawyerHood ⚡ Instantâneo

dev-browser

por SawyerHood · SawyerHood/dev-browser

Um Claude Skill que inicializa um navegador com devtools habilitados que seu agente pode controlar — navegar, clicar, inspecionar, tirar screenshots.

O dev-browser oferece ao seu agente Claude um navegador headless voltado para desenvolvimento via prompts de skill. Encapsula um navegador baseado em CDP com affordances amigáveis para agentes: seletores estáveis, screenshot a cada ação e snapshots do DOM prontos para chunking. Ideal quando você precisa de um navegador mas não quer configurar o playwright do zero.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por que usar

Principais recursos

Demo ao vivo

Como fica na prática

pronto

Instalação

Repositório do autor · Documentação oficial de Skills do Claude

Casos de uso

Usos do mundo real: dev-browser

Fazer pesquisa rápida na web sem configurar um MCP

👤 Devs que não querem o Playwright na configuração do MCP ⏱ ~15 min beginner

Quando usar: Você quer que sua sessão do Claude Code navegue em algo pontualmente sem se comprometer com um servidor de navegador persistente.

Fluxo
  1. Inicializar
    Use dev-browser. Abra https://vercel.com/docs/functions. Liste as seções da barra lateral.✓ Copiado
    → Títulos extraídos com URLs de âncora
  2. Aprofundar
    Navegue para "Runtime" — leia a página e resuma as três opções de runtime em um parágrafo cada.✓ Copiado
    → Três parágrafos com citações para fragmentos de URL
  3. Capturar
    Faça screenshot da seção de preços para minhas notas.✓ Copiado
    → Screenshot salvo localmente

Resultado: Pesquisa feita com um navegador quando você precisava de um, sem infraestrutura contínua.

Armadilhas
  • Binário do Chromium ausente — Execute npx playwright install chromium uma vez
Combine com: filesystem

Verificação rápida de um fluxo de login em ambiente de staging

👤 Devs com mentalidade de QA antes do deploy ⏱ ~5 min beginner

Quando usar: Antes de fazer deploy, você quer clicar pelo caminho feliz crítico uma vez.

Fluxo
  1. Abrir
    Use dev-browser. Abra https://staging.myapp.com, tire um screenshot.✓ Copiado
    → Screenshot da landing page
  2. Entrar
    Clique em "Entrar", insira [email protected] / Test1234, envie.✓ Copiado
    → Dashboard pós-login capturado
  3. Confirmar
    A string "Bem-vindo, qa" está visível na página?✓ Copiado
    → Sim/não + screenshot

Resultado: Um smoke test de 60 segundos antes de clicar em Deploy.

Armadilhas
  • CAPTCHA no login — Adicione um bypass exclusivo para testes no staging; o dev-browser não quebra captchas

Combinações

Combine com outros MCPs para 10× de alavancagem

dev-browser-skill + filesystem

Salvar screenshots junto com as notas

Após cada etapa, salve o screenshot em /notes/web-research/.✓ Copiado
dev-browser-skill + chrome-devtools

Quando precisar de profundidade no nível de devtools, escale para o chrome-devtools MCP

dev-browser me deu a página — agora use chrome-devtools para verificar o waterfall de rede.✓ Copiado

Ferramentas

O que este MCP expõe

FerramentaEntradasQuando chamarCusto
open_url url Navegar 0
click selector|text Interagir 0
type selector, text Inserir texto 0
snapshot none Ancorar no estado atual 0

Custo e limites

O que custa rodar

Cota de API
N/A
Tokens por chamada
Snapshots DOM com limite de tamanho; screenshots em base64
Monetário
Gratuito
Dica
Pule snapshots quando não precisar — o screenshot isolado geralmente é suficiente

Segurança

Permissões, segredos, alcance

Armazenamento de credenciais: Nenhum
Saída de dados: Direto para os sites que você navega

Solução de problemas

Erros comuns e correções

Error: Executable doesn't exist at chromium path

npx playwright install chromium — o skill assume os binários do Playwright

Seletor não encontrado

Execute snapshot primeiro; escolha o seletor do DOM real, não adivinhado

Página bloqueia automação

O site detectou headless — tente executar com headless=false na configuração do skill

Alternativas

dev-browser vs. outros

AlternativaQuando usarTroca
playwright MCPVocê quer um navegador persistente registrado no MCPMais configuração; o skill é mais leve
mcp-chromeVocê precisa do seu Chrome real já logadoNão é um navegador de teste headless

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills