MCP Browser Debugger

Servidor MCP avançado para debugging completo de frontend com análise de DOM, execução de JavaScript, monitoramento de rede e muito mais.

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

🚀 Funcionalidades

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

Exemplos de Comandos para o Agent

1. 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. navigate

Navega para uma URL específica.

Parâmetros:

• url (obrigatório): URL completa

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

• timeout: Timeout em ms

2. get_dom

Extrai o HTML completo do DOM.

Parâmetros:

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

3. get_element

Inspeciona um elemento específico.

Parâmetros:

• selector (obrigatório): Seletor CSS

• includeStyles: Incluir estilos computados

• includeAttributes: Incluir atributos

4. execute_js

Executa JavaScript no contexto da página.

Parâmetros:

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

• returnValue: Retornar valor da execução

5. screenshot

Captura screenshot.

Parâmetros:

• selector: Elemento específico (opcional)

• fullPage: Página inteira com scroll

• path: Caminho para salvar

6. get_console_logs

Recupera logs do console.

Parâmetros:

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

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

7. get_network_activity

Recupera atividade de rede.

Parâmetros:

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

• clear: Limpar histórico

8. get_page_source

Extrai código fonte completo.

Parâmetros:

• includeScripts: Incluir scripts

• includeStyles: Incluir estilos

9. query_selector_all

Busca múltiplos elementos.

Parâmetros:

• selector (obrigatório): Seletor CSS

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

10. get_page_info

Informações gerais da página.

11. click_element

Clica em um elemento.

Parâmetros:

• selector (obrigatório): Seletor CSS

• waitForNavigation: Aguardar navegação

12. type_text

Digita texto em input.

Parâmetros:

• selector (obrigatório): Seletor CSS

• text (obrigatório): Texto a digitar

• clearFirst: Limpar antes de digitar

13. get_local_storage

Acessa localStorage.

14. get_cookies

Lista cookies.

15. 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