Chrome Debug MCP Server

이 MCP를 사용하면 스크린샷과 콘솔 로그를 포함한 브라우저 상호작용을 크롬 확장 프로그램으로 기록할 수 있습니다. 그런 다음 데이터는 로컬 데이터베이스에 저장되어 클로드 코드와 같은 AI 시스템에 전달되어 검색할 수 있습니다.

npmjs.com에서 보기

문서

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?

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

Extension not communicating?

Check the extension popup shows "Connected" status
Reload the extension in chrome://extensions/
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

License

MIT