Debugger MCP Server

Uma ferramenta de desenvolvimento para depuração em tempo real, monitoramento de qualidade de código e insights de IA para aplicações React/Next.js.

GitHub

Documentação

Debugger MCP Server

Uma ferramenta abrangente de companhia para desenvolvimento que fornece depuração em tempo real, monitoramento de qualidade de código e insights aprimorados por IA para aplicações React/Next.js via Model Context Protocol (MCP).

🚀 Recursos

Depuração Tradicional

Captura de Erros: Erros capturados/não capturados, erros de console, rejeições de promessas
Integração com Chrome DevTools: Capacidades completas de depuração de navegador via Puppeteer
Gerenciamento de Breakpoints: Definir, remover e gerenciar breakpoints com análises
Breakpoints Condicionais: Condições avançadas de breakpoint e rastreamento de contagem de acertos
Logpoints: Depuração não intrusiva com mensagens de log dinâmicas
Monitoramento de Rede: Rastrear chamadas de API, requisições com falha, desempenho
Streaming em Tempo Real: Dados de erros e desempenho ao vivo

Monitoramento de Qualidade de Código

Análise de Complexidade: Complexidade ciclomática, métricas de funções, profundidade de aninhamento
Aplicação de Regras: Regras estilo ESLint sem executar ferramentas separadas
Detecção de Padrões: Convenções de nomenclatura, padrões de importação, conformidade arquitetural
Observação de Arquivos: Análise em tempo real em mudanças de código

Específico para React/Next.js

Análise de Componentes: Rastreamento de estado, detecção de prop drilling
Monitoramento de Hooks: Dependências de useEffect, conformidade com regras de hooks
Insights de Desempenho: Tempos de renderização, análise de bundle, monitoramento de SSR
Integração com Build: Feedback em tempo real durante o desenvolvimento

📦 Instalação

# Clone the repository
git clone <repository-url>
cd debugger-mcp

# Install dependencies
npm install

# Build the project
npm run build

🎯 Início Rápido

1. Inicie o Servidor MCP

# Development mode (with hot reload)
npm run dev

# Production mode
npm start

2. Conecte ao Claude Desktop

Adicione isto à configuração MCP do seu Claude Desktop:

{
  "mcpServers": {
    "debugger": {
      "command": "node",
      "args": ["/path/to/debugger-mcp/dist/index.js"],
      "env": {}
    }
  }
}

3. Teste a Conexão

No Claude Desktop, tente estes comandos:

# Get current debugging session info
Use the get-debug-session tool

# Check for errors
Use the get-errors tool

# Analyze code complexity
Use the analyze-complexity tool with filePath: "src/components/MyComponent.tsx"

🛠 Ferramentas MCP Disponíveis

Ferramenta	Descrição	Parâmetros
`get-debug-session`	Obter informações da sessão de depuração atual	Nenhum
`get-errors`	Obter erros e exceções atuais	`severity?`, `timeframe?`
`get-violations`	Obter violações de regras de qualidade de código	`severity?`, `filePath?`
`analyze-complexity`	Analisar métricas de complexidade de um arquivo	`filePath`
`get-performance`	Obter métricas e insights de desempenho	`timeframe?`
`manage-breakpoints`	Definir, remover e gerenciar breakpoints de depuração	`action`, `location?`, `options?`, `breakpointId?`, `active?`
`update-config`	Atualizar configuração do depurador	`config`

📡 Recursos MCP Disponíveis

Recurso	Descrição	URI
Stream de Erros	Stream em tempo real de erros	`stream://errors`
Stream de Violações	Violações de qualidade de código em tempo real	`stream://violations`
Stream de Desempenho	Métricas de desempenho em tempo real	`stream://performance`

🔍 Gerenciamento de Breakpoints

O depurador fornece capacidades abrangentes de gerenciamento de breakpoints através da ferramenta manage-breakpoints:

Definindo Breakpoints

# Set a simple breakpoint
Use the manage-breakpoints tool with:
- action: "set"
- location: { "filePath": "src/components/App.tsx", "lineNumber": 25 }

# Set a conditional breakpoint
Use the manage-breakpoints tool with:
- action: "set"
- location: { "filePath": "src/utils/api.ts", "lineNumber": 15 }
- options: { "condition": "response.status >= 400" }

# Set a logpoint (non-intrusive debugging)
Use the manage-breakpoints tool with:
- action: "set"
- location: { "filePath": "src/hooks/useAuth.ts", "lineNumber": 30 }
- options: { "logMessage": "User login attempt: ${user.email}" }

Gerenciando Breakpoints

# List all breakpoints
Use the manage-breakpoints tool with action: "list"

# Remove a specific breakpoint
Use the manage-breakpoints tool with:
- action: "remove"
- breakpointId: "bp-123"

# Clear all breakpoints
Use the manage-breakpoints tool with action: "clear"

# Toggle breakpoints on/off
Use the manage-breakpoints tool with:
- action: "toggle"
- active: false

Análises de Breakpoints

# Get breakpoint analytics and hit statistics
Use the manage-breakpoints tool with action: "analytics"

Isso fornece informações detalhadas sobre:

Total de breakpoints e contagens de acertos
Breakpoints mais frequentemente atingidos
Estatísticas de acertos por arquivo e tempo
Atividade recente de breakpoints

⚙️ Configuração

O depurador cria um arquivo de configuração .debugger-mcp.json com estas opções:

{
  "complexity": {
    "maxFileLines": 300,
    "maxFunctionComplexity": 10,
    "maxFunctionParams": 5,
    "maxNestingDepth": 4
  },
  "patterns": {
    "namingConventions": {
      "components": "^[A-Z][a-zA-Z0-9]*$",
      "hooks": "^use[A-Z][a-zA-Z0-9]*$"
    }
  },
  "watching": {
    "paths": ["src", "pages", "components"],
    "ignored": ["node_modules", ".git", "dist"]
  },
  "browser": {
    "autoConnect": true,
    "port": 9222
  },
  "breakpoints": {
    "maxRecentHits": 100,
    "autoRemoveAfterHits": null,
    "enableAnalytics": true,
    "persistBreakpoints": true,
    "logpointTimeout": 5000,
    "enableConditionalBreakpoints": true,
    "enableLogpoints": true
  }
}

🔧 Desenvolvimento

# Run in development mode
npm run dev

# Build the project
npm run build

# Run tests
npm test

# Lint code
npm run lint

# Format code
npm run format

📋 Arquitetura

┌─────────────────────────────────────────────────────────┐
│                 Debugger MCP Server                     │
├─────────────────────────────────────────────────────────┤
│  MCP Interface                                          │
│  • Tools for querying data   │  • SSE streaming         │
│  • Configuration management  │  • Real-time updates     │
├─────────────────────────────────────────────────────────┤
│  Core Debugging Engine                                  │
│  • Chrome DevTools Protocol  │  • File System Watcher   │
│  • Code Quality Analysis     │  • Performance Monitor   │
│  • Error Tracking           │  • Stream Management     │
├─────────────────────────────────────────────────────────┤
│  Real-time Communication                               │
│  • Live error streaming     │  • Configuration updates │
│  • Performance metrics      │  • Code quality alerts   │
└─────────────────────────────────────────────────────────┘

🎯 Casos de Uso

Durante o Desenvolvimento

Feedback em tempo real sobre qualidade de código enquanto você digita
Detecção imediata de erros sem esperar por builds
Monitoramento de desempenho dos seus componentes React
Verificação de conformidade arquitetural

Revisão de Código

Análise de complexidade de arquivos alterados
Verificação de conformidade de padrões
Avaliação de impacto no desempenho

Depuração

Rastreamento de erros ao vivo entre navegador e build
Monitoramento de requisições de rede
Inspeção de estado de componentes
Identificação de gargalos de desempenho

🤝 Contribuindo

Faça um fork do repositório
Crie um branch de funcionalidade
Faça suas alterações
Adicione testes
Envie um pull request

📄 Licença

Licença MIT - veja o arquivo LICENSE para detalhes

🆘 Suporte

Issues: Reporte bugs e solicitações de recursos no GitHub
Documentação: Consulte o diretório docs/ para guias detalhados
Exemplos: Veja o diretório examples/ para exemplos de uso

Feito com ❤️ para a comunidade de desenvolvimento React/Next.js