browser-connect-mcp
Advanced tools
MCP server for browser DevTools and backend debugging - analyze console logs, network requests, and backend logs with AI assistance
A Model Context Protocol (MCP) server that enables AI assistants to connect to browser DevTools and backend debuggers for comprehensive full-stack debugging. Works with any MCP-compatible tool including Claude Desktop, Claude Code, Cursor, Cline, Roo-Cline, and more!
Browser Connect MCP gives AI assistants the ability to:
Frontend Debugging:
Backend Debugging (NEW!):
AI-Powered Analysis:
All through natural conversation - no coding required!
Add to your AI assistant's MCP configuration. Here are examples for popular tools:
IMPORTANT: Due to how MCP clients handle spawning commands, you MUST use the following configuration format with npx as the command and the package name as an argument:
Claude Desktop (macOS: ~/Library/Application Support/Claude/claude_desktop_config.json, Windows: %APPDATA%\Claude\claude_desktop_config.json):
{
"mcpServers": {
"browser-connect": {
"command": "npx",
"args": ["-y", "browser-connect-mcp"],
"env": {
"LOG_LEVEL": "info"
}
}
}
}
Note: The -y flag ensures npx runs without prompting. NPM will automatically use the latest version.
Cursor/Cline/Other MCP Tools: Check your tool's documentation for MCP server configuration location.
After saving the configuration, restart your AI assistant application to load the browser debugging capabilities.
Just talk to your AI assistant naturally:
You: "Help me debug my website at localhost:3000"
AI: I'll help you debug your website. Let me launch Chrome with debugging enabled
and connect to it.
[AI launches Chrome and connects automatically]
Now I'm connected to your browser. I can see the console messages and network traffic.
What specific issues are you experiencing?
You: "The page is loading slowly"
AI: Let me analyze the performance of your page...
[AI automatically runs performance analysis]
I found several performance issues:
1. Large uncompressed images (3.2MB total)
2. Render-blocking JavaScript in the header
3. Multiple API calls that could be batched
Would you like me to investigate any of these issues in detail?
This MCP server works with any tool that supports the Model Context Protocol:
You: "My app isn't working, can you help debug it?"
AI: I'll help you debug your app. Let me connect to your browser and see what's happening.
[Automatically launches/connects to Chrome]
I can see your application. Let me check for any errors...
I found several issues:
1. API calls to /api/user are returning 401 Unauthorized errors
2. There are CORS errors when trying to access the payment service
3. Several "undefined is not a function" errors in your React components
The 401 errors suggest an authentication issue. Would you like me to:
- Look at the request headers to check authentication tokens?
- Find when the authentication errors started?
- Check if there are any related console errors?
You: "Users are complaining the checkout page is slow"
AI: I'll analyze the checkout page performance. Let me connect to your browser and load the checkout page.
[Connects and monitors the page load]
Here's what I found analyzing your checkout page:
Performance Issues:
1. Initial page load: 4.3 seconds (should be under 3s)
2. Largest Contentful Paint: 3.8 seconds
3. Time to Interactive: 5.2 seconds
Main bottlenecks:
- Product images are not optimized (2.1MB total)
- Stripe SDK loads synchronously, blocking render
- 3 sequential API calls that could run in parallel
Recommendations:
1. Compress and lazy-load product images
2. Load Stripe SDK asynchronously
3. Parallelize the API calls
Would you like me to show you the specific network requests causing delays?
You: "Can you check my app for security issues?"
AI: I'll run a comprehensive security scan on your application.
[Automatically scans console logs and network traffic]
Security Scan Results:
⚠️ High Priority Issues:
1. API keys exposed in console logs (GitHub API key found)
2. User passwords visible in network requests (should use HTTPS)
3. Missing security headers (CSP, X-Frame-Options)
🔍 Medium Priority:
1. Cookies without 'Secure' flag
2. LocalStorage containing sensitive user data
3. Mixed content warnings (HTTP resources on HTTPS page)
✓ Good Security Practices Found:
1. HTTPS enabled on main domain
2. Authentication tokens expire appropriately
3. Input validation on forms
Would you like me to explain how to fix any of these issues?
You: "My users are getting 500 errors but I can't figure out why"
AI: I'll help you debug this issue by examining both frontend and backend. Let me start by connecting to your browser and checking for errors.
[Connects to browser and analyzes network traffic]
I see multiple 500 errors from /api/checkout. Now let me check your backend logs to understand what's happening server-side.
[Streams backend logs]
Found the issue! Here's what's happening:
Frontend (Browser):
- POST /api/checkout returning 500 errors
- Errors started 15 minutes ago
- Affecting 23% of requests
Backend (Server Logs):
- Database connection pool exhausted
- "Error: Connection timeout" in checkout handler
- Memory usage spiking before errors
Root Cause:
Your checkout process isn't closing database connections properly, leading to connection pool exhaustion under load.
Quick Fix:
Add connection.release() after your database queries in the checkout handler.
Long-term Fix:
Implement connection pooling with automatic cleanup and monitoring.
You: "I need help debugging my React app"
Your AI assistant will automatically:
1. Launch Chrome with debugging enabled
2. Navigate to your app
3. Start monitoring console and network
4. Provide insights on any issues found
You: "Are there any errors on my website?"
Your AI assistant will:
1. Connect to your browser
2. Search for all error-level messages
3. Analyze error patterns
4. Suggest fixes
You: "Help me debug why my API calls are failing"
Your AI assistant will:
1. Monitor network traffic
2. Identify failed requests
3. Analyze request/response details
4. Identify patterns in failures
You: "Analyze my server logs for errors"
Your AI assistant will:
1. Connect to your log source (file, process, or Docker)
2. Parse and structure log entries
3. Filter for errors and warnings
4. Identify patterns and anomalies
5. Correlate with frontend issues
You: "Debug my Node.js application"
Your AI assistant will:
1. Attach to Node.js debugger (--inspect)
2. Monitor runtime errors and exceptions
3. Analyze performance bottlenecks
4. Track memory usage
5. Provide optimization suggestions
npm install -g browser-connect-mcp
Then update your AI assistant's config:
{
"mcpServers": {
"browser-connect": {
"command": "browser-connect-mcp",
"env": {
"LOG_LEVEL": "info"
}
}
}
}
git clone https://github.com/perception30/browser-connect-mcp.git
cd browser-connect-mcp
npm install
npm run build
// macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
// Windows: %APPDATA%\Claude\claude_desktop_config.json
{
"mcpServers": {
"browser-connect": {
"command": "npx",
"args": ["-y", "browser-connect-mcp@0.4.1"]
}
}
}
Important: Always use npx as the command with the package name as arguments. Do NOT use the package name directly as the command - this will cause a "spawn ENOENT" error.
Check Cursor's MCP settings in the preferences/settings panel for adding MCP servers.
These CLI tools typically use a configuration file like .cline/config.json. Consult their documentation for MCP server setup.
Configuration varies by extension. Look for MCP server settings in the extension's configuration panel.
chromium-browser--inspect flagWhen you ask your AI assistant to debug your application, this MCP server:
For Frontend Debugging:
For Backend Debugging:
AI Analysis: 5. Provides your AI assistant with comprehensive debugging data 6. Enables intelligent analysis across the full stack 7. Maintains context throughout your debugging conversation
All of this happens automatically - you just describe what you need!
We welcome contributions! Please see our Contributing Guide for details.
git checkout -b feature/amazing-feature)git commit -m 'Add amazing feature')git push origin feature/amazing-feature)This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ for developers who want to debug with AI assistance
This server implements the Model Context Protocol (MCP) standard, making it compatible with:
FAQs
MCP server for browser DevTools and backend debugging - analyze console logs, network requests, and backend logs with AI assistance
The npm package browser-connect-mcp receives a total of 17 weekly downloads. As such, browser-connect-mcp popularity was classified as not popular.
We found that browser-connect-mcp demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.