Debugger MCP Server

Una herramienta de desarrollo para depuración en tiempo real, monitoreo de calidad de código e información de IA para aplicaciones React/Next.js.

GitHub

Documentación

Debugger MCP Server

Una herramienta de desarrollo integral que proporciona depuración en tiempo real, monitoreo de calidad de código e información mejorada con IA para aplicaciones React/Next.js mediante el Model Context Protocol (MCP).

🚀 Características

Depuración Tradicional

Captura de Errores: Errores capturados/no capturados, errores de consola, rechazos de promesas
Integración con Chrome DevTools: Capacidades completas de depuración de navegador mediante Puppeteer
Gestión de Puntos de Interrupción: Establecer, eliminar y gestionar puntos de interrupción con análisis
Puntos de Interrupción Condicionales: Condiciones avanzadas de puntos de interrupción y seguimiento de conteo de aciertos
Logpoints: Depuración no intrusiva con mensajes de registro dinámicos
Monitoreo de Red: Seguimiento de llamadas API, solicitudes fallidas y rendimiento
Transmisión en Tiempo Real: Datos de errores y rendimiento en vivo

Monitoreo de Calidad de Código

Análisis de Complejidad: Complejidad ciclomática, métricas de funciones, profundidad de anidamiento
Aplicación de Reglas: Reglas estilo ESLint sin ejecutar herramientas separadas
Detección de Patrones: Convenciones de nomenclatura, patrones de importación, cumplimiento de arquitectura
Vigilancia de Archivos: Análisis en tiempo real de cambios de código

Específico de React/Next.js

Análisis de Componentes: Seguimiento de estado, detección de prop drilling
Monitoreo de Hooks: Dependencias de useEffect, cumplimiento de reglas de hooks
Información de Rendimiento: Tiempos de renderizado, análisis de bundle, monitoreo de SSR
Integración de Compilación: Retroalimentación en tiempo real durante el desarrollo

📦 Instalación

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

# Install dependencies
npm install

# Build the project
npm run build

🎯 Inicio Rápido

1. Iniciar el Servidor MCP

# Development mode (with hot reload)
npm run dev

# Production mode
npm start

2. Conectar a Claude Desktop

Agrega esto a tu configuración MCP de Claude Desktop:

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

3. Probar la Conexión

En Claude Desktop, prueba estos 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"

🛠 Herramientas MCP Disponibles

Herramienta	Descripción	Parámetros
`get-debug-session`	Obtener información de la sesión de depuración actual	Ninguno
`get-errors`	Obtener errores y excepciones actuales	`severity?`, `timeframe?`
`get-violations`	Obtener violaciones de reglas de calidad de código	`severity?`, `filePath?`
`analyze-complexity`	Analizar métricas de complejidad de un archivo	`filePath`
`get-performance`	Obtener métricas e información de rendimiento	`timeframe?`
`manage-breakpoints`	Establecer, eliminar y gestionar puntos de interrupción de depuración	`action`, `location?`, `options?`, `breakpointId?`, `active?`
`update-config`	Actualizar configuración del depurador	`config`

📡 Recursos MCP Disponibles

Recurso	Descripción	URI
Flujo de Errores	Flujo de errores en tiempo real	`stream://errors`
Flujo de Violaciones	Violaciones de calidad de código en tiempo real	`stream://violations`
Flujo de Rendimiento	Métricas de rendimiento en tiempo real	`stream://performance`

🔍 Gestión de Puntos de Interrupción

El depurador proporciona capacidades completas de gestión de puntos de interrupción a través de la herramienta manage-breakpoints:

Establecer Puntos de Interrupción

# 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}" }

Gestionar Puntos de Interrupción

# 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álisis de Puntos de Interrupción

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

Esto proporciona información detallada sobre:

Total de puntos de interrupción y conteos de aciertos
Puntos de interrupción más frecuentemente alcanzados
Estadísticas de aciertos por archivo y tiempo
Actividad reciente de puntos de interrupción

⚙️ Configuración

El depurador crea un archivo de configuración .debugger-mcp.json con estas opciones:

{
  "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
  }
}

🔧 Desarrollo

# 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

📋 Arquitectura

┌─────────────────────────────────────────────────────────┐
│                 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 el Desarrollo

Retroalimentación en tiempo real sobre la calidad del código mientras escribes
Detección inmediata de errores sin esperar compilaciones
Monitoreo de rendimiento de tus componentes React
Verificación de cumplimiento de arquitectura

Revisión de Código

Análisis de complejidad de archivos modificados
Verificación de cumplimiento de patrones
Evaluación de impacto en el rendimiento

Depuración

Seguimiento de errores en vivo entre navegador y compilación
Monitoreo de solicitudes de red
Inspección de estado de componentes
Identificación de cuellos de botella de rendimiento

🤝 Contribuciones

Haz un fork del repositorio
Crea una rama de características
Realiza tus cambios
Agrega pruebas
Envía una solicitud de extracción (pull request)

📄 Licencia

Licencia MIT: consulta el archivo LICENSE para obtener más detalles

🆘 Soporte

Problemas: Reporta errores y solicitudes de funciones en GitHub
Documentación: Consulta el directorio docs/ para guías detalladas
Ejemplos: Consulta el directorio examples/ para ejemplos de uso

Construido con ❤️ para la comunidad de desarrollo de React/Next.js