ChromeDebug MCP

Give your AI assistant eyes into your browser. ChromeDebug connects Claude Code directly to Chrome, letting AI see, interact with, and debug web pages alongside you.

Why ChromeDebug?

• Show, don't tell - Record bugs instead of explaining them
• AI sees what you see - Screenshots, console logs, and DOM in real-time
• Click to select - Point at elements, let AI modify them
• 100% private - All data stays on your machine

Quick Start (2 minutes)

1. Install the MCP Server

npm install -g @dynamicu/chromedebug-mcp

2. Add to Claude Code

claude mcp add chromedebug -s user -- chromedebug-mcp

3. Install Chrome Extension

🌐 Install from Chrome Web Store (FREE)

That's it! Ask Claude to "launch Chrome" and start debugging.

---

Features

🎬 Three Recording Modes

Mode	What it does	Best for
Screen Recording	Captures video + console logs	Bug reports, demos
Workflow Recording	Records clicks, inputs, screenshots	Step-by-step debugging
Screenshot Recording	Click-to-capture with countdown	Dropdowns, modals, dynamic content

🎯 Visual Element Selection

Click any element → AI can inspect and modify it instantly.

You: "Make that button blue"
Claude: *applies CSS to selected element*

🔍 Console Log Sync

Every recording includes synchronized console output. AI sees exactly what happened when.

---

Example Prompts

Once connected, try these with Claude:

"Launch Chrome and go to my app"
"Record what happens when I click checkout"
"Show me the console errors on this page"
"Make the selected element have rounded corners"
"Replay my last workflow recording"

---

FREE vs PRO

FREE	PRO
Recordings per day	5	Unlimited
Screen/Workflow/Screenshot modes	✅	✅
Console log sync	✅	✅
Export as ZIP/MP4	❌	✅
Function tracing	❌	✅
Watermark-free exports	❌	✅

💎 Get PRO - Unlimited recordings + video export

---

Installation Details

Windows Users (WSL2 recommended)

Install WSL2

wsl --install

Then in WSL terminal:

npm install -g @dynamicu/chromedebug-mcp claude mcp add chromedebug -s user -- wsl chromedebug-mcp

Manual MCP Configuration

Add to ~/.claude/config.json:

{ "mcpServers": { "chromedebug": { "command": "chromedebug-mcp" } } }

Troubleshooting

Running the Server Manually

If the MCP server isn't starting automatically, you can run it directly:

Start the MCP server

chromedebug-mcp

With verbose logging (shows connection details)

chromedebug-mcp --verbose

View all options

chromedebug-mcp --help

Common Issues

Server not connecting?

1. Ensure Chrome is closed before launching
2. Run chromedebug-mcp --verbose to see detailed logs
3. Check that port 3001 (or configured port) is available

Extension not communicating?

1. Check the extension popup shows "Connected" status
2. Reload the extension in chrome://extensions/
3. Restart Chrome with a fresh profile

---

Privacy

• ✅ 100% Local - Recordings never leave your machine
• ✅ No cloud - No uploads, no accounts
• ✅ No tracking - Zero analytics or telemetry

---

Links

• 📺 Demo Video
• 🌐 Chrome Extension
• 💎 Get PRO

---

License

MIT