Dê a Claude Seu Console do Navegador — Ele Depura Como um Verdadeiro Desenvolvedor

Você conhece aquele momento em que algo quebra em seu aplicativo web e você abre as DevTools, verifica o console, escaneia a aba de rede, encontra a chamada de API com falha, lê a resposta JSON — e finalmente descobre o que deu errado?

É exatamente isso que o mare-browser-mcp dá a Claude.

Não é uma captura de tela. Não é um despejo do DOM. Os erros reais do console, as solicitações de rede reais, as respostas JSON reais da sua API. Claude os lê da mesma forma que você.

O Problema Com Outras Ferramentas MCP de Navegador

A maioria dos servidores MCP de navegador dá ao LLM um movimento: tirar uma captura de tela.

Capturas de tela são pixels. Claude tem que adivinhar o que está acontecendo a partir de uma imagem. Ele não pode ver uma resposta 401. Ele não pode ler uma pilha de erros JS. Ele não pode dizer se uma API retornou { error: "sessão expirada" }.

Isso não é depuração. Isso é adivinhação.

O Que o mare-browser-mcp Faz de Diferente

Uma ferramenta faz o trabalho pesado: browser_debug

Chame-a após qualquer coisa dar errado e você receberá:

• URL atual e título da página
• Todos os logs do console (erros, avisos, tudo)
• Todas as solicitações de rede com códigos de status e corpos de resposta JSON completos

{
  "current_url": "https://myapp.com/dashboard",
  "title": "Dashboard",
  "console": [
    { "type": "error", "text": "Uncaught TypeError: Cannot read properties of undefined (reading 'user')" }
  ],
  "network": [
    { "url": "/api/session", "method": "POST", "status": 401, "body": { "error": "token expired" } }
  ]
}

Claude lê isso e sabe exatamente o que aconteceu — token expirado, sessão falhou, JS travou porque o usuário estava indefinido. A mesma conclusão que você chegaria em 30 segundos de DevTools.

O Conjunto Completo de Ferramentas

8 ferramentas, cada uma com uma tarefa clara:

• browser_navigate — vá para uma URL, opcionalmente limpe os logs antes de começar
• browser_act — clique, preencha, pressione tecla, role — agrupe várias etapas em uma única chamada
• browser_debug — comece aqui quando algo quebrar
• browser_query — leia elementos do DOM sem uma captura de tela
• browser_eval — execute qualquer JavaScript na página
• browser_scroll — role por pixels ou até um elemento específico
• browser_wait_for_network — aguarde uma chamada de API específica ser concluída
• browser_screenshot — último recurso apenas

Sessão de Depuração Real

1. browser_navigate("https://myapp.com", clear_logs: true)

2. browser_act([
     { action: "fill", selector: "#email", value: "user@example.com" },
     { action: "fill", selector: "#password", value: "secret" },
     { action: "click", selector: "button[type=submit]" }
   ])

3. browser_wait_for_network({ url_pattern: "/api/session", method: "POST" })

4. browser_debug({ console_types: ["error"] })
   → vê 401 + "token expired" na resposta corpo

5. Descobre a solução. Sem vai e volta. Sem capturas de tela.

Este é o fluxo de trabalho. Claude age, aguarda a rede, lê a saída de depuração, entende o que aconteceu.

Instale em 5 Comandos

git clone https://github.com/emadklenka/mare_browser_mcp
cd mare_browser_mcp
pnpm install
npx playwright install chromium
pnpm run setup

pnpm run setup registra o MCP com Claude Code automaticamente — sem configuração de caminho manual.

É Grátis

Licença MIT. Use como quiser.

Se isso economizar seu tempo de depuração → https://buymeacoffee.com/emadomar

GitHub → https://github.com/emadklenka/mare_browser_mcp