MCP Browser Debugger

Servidor MCP avançado para debugging completo de frontend com análise de DOM, execução de JavaScript3. 🆕 Fluxo completo: Login e inspeção:

4. Debugar uma página web:o de rede e muito mais.

Desenvolvido em TypeScript com padrões profissionais de código (ESLint + Prettier).

🚀 Funcionalidades

🌐 Controle do Browser

• open_browser: Abre o browser em modo VISÍVEL (headful) para você ver as ações do agent em tempo real

• login: Faz login automatizado e mantém a sessão ativa para inspeção

Navegação e Carregamento

• navigate: Navega para qualquer URL com controle de timeout e condições de espera

• get_page_info: Obtém informações completas sobre a página atual

Análise de DOM

• get_dom: Extrai o HTML completo do DOM

• get_element: Inspeciona elementos específicos com estilos computados

• query_selector_all: Busca múltiplos elementos por seletor CSS

• evaluate_xpath: Avalia expressões XPath

Código Fonte

• get_page_source: Extrai todo código fonte incluindo scripts e estilos

• execute_js: Executa JavaScript arbitrário no contexto da página

Debugging e Monitoramento

• get_console_logs: Captura todos os logs do console

• get_network_activity: Monitora todas as requisições HTTP

• screenshot: Captura screenshots da página ou elementos específicos

Interação

• click_element: Clica em elementos

• type_text: Digita texto em campos de input

Inspeção de Dados

• get_local_storage: Acessa localStorage

• get_cookies: Lista todos os cookies

📦 Instalação

🛠️ Scripts Disponíveis

⚙️ Configuração no Claude Desktop

Adicione ao seu arquivo de configuração do MCP client:

Windows: %APPDATA%\Claude\claude_desktop_config.json

Nota: Após qualquer alteração no código, execute npm run build antes de reiniciar o Claude Desktop.

🔧 Uso

⚠️ IMPORTANTE: Fluxo Correto para Evitar Perda de Sessão

SEMPRE siga esta ordem:

1. Primeiro: Verificar se browser está aberto

   "Verifique se o browser está aberto"

2. Se fechado: Abrir browser visível

   "Abra o browser em modo visível"

3. Fazer login (se necessário)

   "Faça login em https://site.com/login usando..."

4. Continuar usando SEM abrir browser novamente

   "Navegue para...", "Me mostre o DOM", etc.

Exemplos de Comandos para o Agent

1. 🆕 Verificar status do browser:

2. 🆕 Abrir browser visível:

3. 🆕 Fluxo completo: Login e inspeção:

3. Debugar uma página web:

2. Analisar erros de console:

3. Inspecionar elemento específico:

4. Executar JavaScript customizado:

5. Monitorar requisições de rede:

6. Extrair código fonte:

7. Capturar screenshot:

🛠️ Ferramentas Disponíveis

1. get_browser_status ⭐ NOVO - USE PRIMEIRO!

Verifica se o browser está aberto ou fechado. SEMPRE use esta ferramenta antes de abrir um novo browser!

Parâmetros: Nenhum

Retorno:

• isOpen: Browser está aberto?

• headless: Modo headless (invisível) ou headful (visível)?

• currentUrl: URL atual da página

• pageTitle: Título da página atual

• message: Mensagem explicativa

Exemplo de uso:

⚠️ Por que é importante:

• Se você abrir um browser que já está aberto, perderá a sessão de login!

• Use esta ferramenta para evitar loops infinitos

2. close_browser ⭐ NOVO

Fecha o browser e encerra a sessão.

Parâmetros: Nenhum

⚠️ ATENÇÃO:

• Isso irá perder todos os cookies, localStorage e sessões de login!

• Use apenas quando o usuário pedir explicitamente para fechar o browser

• Após fechar, você precisará usar open_browser para abrir novamente

Exemplo de uso:

3. open_browser ⭐ NOVO

Abre o browser em modo VISÍVEL para você ver tudo que o agent está fazendo!

⚠️ ATENÇÃO: Use get_browser_status ANTES! Se o browser já estiver aberto, NÃO use esta ferramenta.

Parâmetros:

• url: URL para abrir (opcional)

• headless: Se false, browser fica visível (padrão: false)

• width: Largura da janela (padrão: 1920)

• height: Altura da janela (padrão: 1080)

Exemplo de uso:

4. login ⭐ NOVO

Faz login automatizado e mantém a sessão aberta para inspeção.

Parâmetros:

• url (obrigatório): URL da página de login

• usernameSelector (obrigatório): Seletor CSS do campo username/email

• passwordSelector (obrigatório): Seletor CSS do campo senha

• submitSelector (obrigatório): Seletor CSS do botão de submit

• username (obrigatório): Username ou email

• password (obrigatório): Senha

• waitForSelector: Seletor para confirmar login bem-sucedido (opcional)

• timeout: Timeout em ms (padrão: 30000)

• delayAfterType: Delay após digitar, útil para SPAs (padrão: 500)

Exemplo de uso:

5. navigate

Navega para uma URL específica.

Parâmetros:

• url (obrigatório): URL completa

• waitUntil: "load" | "domcontentloaded" | "networkidle0" | "networkidle2"

• timeout: Timeout em ms

6. get_dom

Extrai o HTML completo do DOM.

Parâmetros:

• prettify: Formatar HTML (padrão: true)

7. get_element

Inspeciona um elemento específico.

Parâmetros:

• selector (obrigatório): Seletor CSS

• includeStyles: Incluir estilos computados

• includeAttributes: Incluir atributos

8. execute_js

Executa JavaScript no contexto da página.

Parâmetros:

• code (obrigatório): Código JavaScript

• returnValue: Retornar valor da execução

9. screenshot

Captura screenshot.

Parâmetros:

• selector: Elemento específico (opcional)

• fullPage: Página inteira com scroll

• path: Caminho para salvar

10. get_console_logs

Recupera logs do console.

Parâmetros:

• filterType: "all" | "log" | "error" | "warning" | "info"

• clear: Limpar logs após recuperação

11. get_network_activity

Recupera atividade de rede.

Parâmetros:

• filterType: "all" | "request" | "response"

• clear: Limpar histórico

12. get_page_source

Extrai código fonte completo.

Parâmetros:

• includeScripts: Incluir scripts

• includeStyles: Incluir estilos

13. query_selector_all

Busca múltiplos elementos.

Parâmetros:

• selector (obrigatório): Seletor CSS

• limit: Limitar resultados (padrão: 100)

14. get_page_info

Informações gerais da página.

15. click_element

Clica em um elemento.

Parâmetros:

• selector (obrigatório): Seletor CSS

• waitForNavigation: Aguardar navegação

16. type_text

Digita texto em input.

Parâmetros:

• selector (obrigatório): Seletor CSS

• text (obrigatório): Texto a digitar

• clearFirst: Limpar antes de digitar

17. get_local_storage

Acessa localStorage.

18. get_cookies

Lista cookies.

19. evaluate_xpath

Avalia XPath.

Parâmetros:

• xpath (obrigatório): Expressão XPath

🎯 Casos de Uso

Debugging de Aplicação React/Vue/Angular

Análise de Performance

Extração de Dados

Testes de UI

🔒 Segurança

• Browser executa em modo headless

• Sandbox desabilitado apenas para compatibilidade local

• Não armazena credenciais

• Logs são mantidos em memória e podem ser limpos

📝 Notas

• O browser é iniciado automaticamente na primeira ferramenta chamada

• Uma única instância de página é mantida entre chamadas

• Console logs e requisições de rede são acumulados entre navegações (use clear: true para limpar)

• Screenshots podem ser salvos em disco ou retornados como base64