Debugger MCP Server

A development tool for real-time debugging, code quality monitoring, and AI insights for React/Next.js applications.

A comprehensive development companion tool that provides real-time debugging, code quality monitoring, and AI-enhanced insights for React/Next.js applications via the Model Context Protocol (MCP).

- Error Capture: Caught/uncaught errors, console errors, promise rejections
- Chrome DevTools Integration: Full browser debugging capabilities via Puppeteer
- Breakpoint Management: Set, remove, and manage breakpoints with analytics
- Conditional Breakpoints: Advanced breakpoint conditions and hit count tracking
- Logpoints: Non-intrusive debugging with dynamic log messages
- Network Monitoring: Track API calls, failed requests, performance
- Real-time Streaming: Live error and performance data

- Complexity Analysis: Cyclomatic complexity, function metrics, nesting depth
- Rule Enforcement: ESLint-style rules without running separate tools
- Pattern Detection: Naming conventions, import patterns, architecture compliance
- File Watching: Real-time analysis on code changes

- Component Analysis: State tracking, prop drilling detection
- Hook Monitoring: useEffect dependencies, hook rule compliance
- Performance Insights: Render times, bundle analysis, SSR monitoring
- Build Integration: Real-time feedback during development

# Clone the repository git clone <repository-url> cd debugger-mcp # Install dependencies npm install # Build the project npm run build

# Development mode (with hot reload) npm run dev # Production mode npm start

Add this to your Claude Desktop MCP configuration:

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

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

The debugger provides comprehensive breakpoint management capabilities through themanage-breakpointstool:

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

# 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

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

This provides detailed information about:

- Total breakpoints and hit counts
- Most frequently hit breakpoints
- Hit statistics by file and time
- Recent breakpoint activity

The debugger creates a.debugger-mcp.jsonconfiguration file with these options:

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

# 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

┌─────────────────────────────────────────────────────────┐ │ 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 │ └─────────────────────────────────────────────────────────┘

- Real-time feedbackon code quality as you type
- Immediate error detectionwithout waiting for builds
- Performance monitoringof your React components
- Architecture compliancechecking

- Complexity analysisof changed files
- Pattern complianceverification
- Performance impactassessment

- Live error trackingacross browser and build
- Network request monitoring
- Component state inspection
- Performance bottleneck identification
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests
- Submit a pull request

MIT License - see LICENSE file for details

- Issues: Report bugs and feature requests on GitHub
- Documentation: Check the docs/ directory for detailed guides
- Examples: See examples/ directory for usage examples

Built with ❤️ for the React/Next.js development community

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

A stateful LSP runtime for AI agents: warm language server sessions with 50+ tools for go-to-definition, find-references, diagnostics, rename, and more across 30+ languages.

AI-powered code quality analysis to detect best practice violations, security issues, and architectural problems in real-time.

An experimental MCP server that uses the ast-grep CLI for code structural search, linting, and rewriting.

MCP server that gives coding agents program-analysis primitives — data flow, call graphs, taint analysis — so they reason from ground truth instead of grep-and-guess. (same as the GitHub About — keeps your messaging consistent across the web).

An MCP service that equips your workspace with a complete set of AI-accessible development tools for reading, editing, executing, and managing code.

Visual Studio extension with 20 Roslyn-powered MCP tools for AI assistants. Semantic code navigation, symbol search, inheritance, call graphs, safe rename, build/test.

A VS Code extension that provides real-time diagnostic problems like errors and warnings via the Model Context Protocol.

A server for detecting critical performance issues in code, providing concise analysis and output.

An MCP server that runs PHPStan static analysis on PHP code — analyze files at a configurable rule level and memory limit, with support for PHPStan Pro, directly from your MCP client.

A server for code analysis using Tree-sitter, with context management capabilities.