Browser Debugger MCP

🔍 Bridge browser debugging context to local AI-powered code assistants

Browser Debugger MCP is a revolutionary one-command setup tool that automatically captures browser debugging context (console logs, network requests, errors) and streams them in real-time to AI assistants like Claude Code for intelligent debugging assistance.

⚡ One-Command Installation

# Install globally
npm install -g browser-debugger-mcp

# Start everything with one command
browser-debugger-mcp start --dashboard

# That's it! 🎉

✨ Features

🚀 Live Data Streaming

• Real-time capture - Live streaming of browser context via WebSocket
• In-memory buffer - Last 100 captures instantly accessible
• SQLite database - Persistent storage with automatic cleanup
• Smart retention - Configurable data retention (default: 24 hours)

🛠️ One-Command Experience

• Zero configuration - Auto-detects and configures Claude Code MCP
• Built-in dashboard - Live web interface at localhost:3030/dashboard
• Desktop shortcuts - Automatic desktop shortcut creation
• Background service - Runs as a system service with start/stop commands

🔧 Enhanced Data Collection

• Automatic triggers - Captures on errors, network failures, and critical events
• Enhanced network capture - Full HTTP request/response data via Chrome Debugger API
• Smart filtering - Only captures meaningful events to reduce noise
• Error categorization - Intelligent classification of JavaScript and network errors
• Framework detection - Auto-detects React, Vue, Angular, and other frameworks

🧠 Advanced MCP Integration

• Live MCP commands - Real-time data access for Claude Code
• Enhanced error analysis - AI-powered error pattern recognition
• Session management - Group captures by development session
• Historical insights - Trend analysis and error history

🏗️ Live Architecture

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│  Browser        │    │  DevContext      │    │  Claude Code    │
│  Extension      │────▶  Bridge Server   │────▶  (MCP Client)  │
│                 │    │                  │    │                 │
└─────────────────┘    │  • HTTP API      │    └─────────────────┘
        │               │  • WebSocket     │    
        ├── Auto Capture│  • SQLite DB     │    
        ├── DevTools    │  • Live Dashboard│    
        └── Smart Filter└──────────────────┘    

🚀 Quick Start

Step 1: Install & Start

# Install globally (one-time setup)
npm install -g browser-debugger-mcp

# Start everything with dashboard
browser-debugger-mcp start --dashboard

This single command:

• ✅ Installs all dependencies
• ✅ Starts HTTP server (port 3030)
• ✅ Starts WebSocket server (port 3031)
• ✅ Starts MCP server for Claude Code
• ✅ Opens live dashboard in browser
• ✅ Shows extension installation guide

Step 2: Install Browser Extension

The dashboard will show you exactly how to install the extension:

1. Open chrome://extensions/
2. Enable "Developer mode"
3. Click "Load unpacked"
4. Select: node_modules/browser-debugger-mcp/browser-extension/dist/

That's it! The extension auto-connects to localhost:3030.

Step 3: Use with Claude Code

Claude Code is automatically configured! Just ask:

"What errors occurred on my website?"
"Analyze the latest browser capture"  
"Show me network failures from the last hour"

📊 Live Dashboard

Visit http://localhost:3030/dashboard for:

• 📈 Real-time statistics - Live capture counts, error rates, connected clients
• 🔍 Activity feed - Live stream of captures, errors, and events
• 🎛️ Quick actions - Test capture, view logs, manage service
• 📊 Error analysis - Visual error trends and hotspots
• 🌐 WebSocket monitoring - Live connection status and data flow

🛠️ CLI Commands

# Service Management
browser-debugger-mcp start --dashboard    # Start with dashboard
browser-debugger-mcp status               # Show service status  
browser-debugger-mcp stop                 # Stop services
browser-debugger-mcp logs --follow        # Live log streaming

# Utilities  
browser-debugger-mcp dashboard            # Open dashboard
browser-debugger-mcp install             # Package extension

🧠 Enhanced MCP Commands

Ask Claude Code these questions after starting the service:

📦 Capture Management:

• list_captures - Show recent browser captures with smart filtering
• get_latest_capture - Get detailed debugging context with error analysis
• get_capture_by_id <ID> - Retrieve specific capture by ID

🔍 Error Analysis:

• analyze_errors - AI-powered error pattern recognition
• stream_status - Live service status and recent activity

🎯 Advanced Features:

• Time-based filtering: analyze_errors --hours 2
• Error-only captures: list_captures --errors-only
• Storage data inclusion: get_latest_capture --include-storage

🏗️ Architecture & Data Flow

Live Data Pipeline

Browser Extension → HTTP API (3030) → SQLite Database + Memory Buffer → MCP Server → Claude Code
                 ↘ WebSocket (3031) → Live Dashboard

🔄 Data Management:

• In-Memory Buffer: Last 100 captures for instant access
• SQLite Database: Persistent storage with automatic cleanup
• Retention Policy: 24-hour default with configurable cleanup
• Smart Filtering: Only meaningful events to reduce noise

🔧 Configuration & Customization

Service Configuration

Create ~/.devcontext-bridge/config.json:

{
  "httpPort": 3030,
  "wsPort": 3031,
  "maxCapturesInMemory": 100,
  "dataRetentionHours": 24,
  "enableNotifications": true,
  "silent": false
}

Extension Features

• 🤖 Automatic Capture: Smart triggers on errors and network failures
• 📊 DevTools Panel: Full debugging interface with live statistics
• ⚡ Elements Sidebar: Quick capture from DOM inspector
• 🎛️ Professional Options: Comprehensive settings management
• 🔍 Enhanced Network Capture: Full HTTP data via Chrome Debugger API

📁 Project Structure

browser-debugger-mcp/
├── bin/devcontext-bridge.js         # CLI entry point
├── src/
│   ├── bridge-server.js            # Main server with live data
│   ├── mcp-server.js               # Enhanced MCP integration  
│   ├── logger.js                   # Real-time logging system
│   └── utils.js                    # Dashboard & utilities
├── browser-extension/              # Chrome extension
│   ├── src/                       # TypeScript source
│   ├── public/                    # Static files  
│   └── dist/                      # Built extension
├── scripts/
│   ├── post-install.js           # Auto-setup script
│   └── install-extension.js      # Extension packager
└── packages/                     # Distribution files

🎉 Features

🆓 Community Edition (Free)

• ✅ Live data streaming with WebSocket dashboard
• ✅ Automatic capture on errors and network failures
• ✅ Enhanced MCP commands with AI-powered analysis
• ✅ Real-time logging with filtering and rotation
• ✅ Professional CLI with service management
• ✅ SQLite storage with automatic cleanup
• ✅ Claude Code integration with auto-configuration

🚀 Pro Edition (Future)

• 🔮 Full network payloads and response bodies
• 🔮 Storage data capture (localStorage, sessionStorage, cookies)
• 🔮 Advanced analytics with trend analysis and insights
• 🔮 Team collaboration with shared capture sessions
• 🔮 Custom integrations and webhook support

🤝 Contributing

We welcome contributions! Please check our Contributing Guidelines and:

1. 🐛 Report bugs - Use GitHub Issues with detailed reproduction steps
2. 💡 Suggest features - Open Discussion threads for new ideas
3. 🔧 Submit PRs - Follow our coding standards and include tests
4. 📚 Improve docs - Help make DevContext Bridge more accessible

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🌟 Star History

If DevContext Bridge helps your debugging workflow, please consider giving us a ⭐ on GitHub!

🚀 Made with ❤️ for developers who love AI-powered debugging

🐛 Report Bug • 💡 Request Feature • 📖 Documentation