Chrome Debug MCP

This MCP allows you to record browser interactions with a chrome extension that include screenshots and console logs. The data is then saved to a local database that feeds the data to an AI system like claude code to search.

View on npmjs.com

ChromeDebug MCP

npm version License: MIT

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

ChromeDebug Extension

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

ModeWhat it doesBest for
Screen RecordingCaptures video + console logsBug reports, demos
Workflow RecordingRecords clicks, inputs, screenshotsStep-by-step debugging
Screenshot RecordingClick-to-capture with countdownDropdowns, modals, dynamic content

Frame Editor

🎯 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.

Workflow Editor

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

FREEPRO
Recordings per day5Unlimited
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

Related Servers