🐛 devcdp

Give your AI assistant (Cursor, Windsurf, Zed, Claude, etc.) full browser DevTools access — console, network, DOM, breakpoints, step-through debugging, and collaborative manual fallback when automation can't do it alone.

What's in this folder

devcdp\
  ├── server.js           — the MCP server (do not edit)
  ├── package.json        — dependencies
  ├── initialize_MCP.bat  — one-click interactive setup (run this first)
  ├── initialize_MCP.js   — interactive configuration script
  └── README.md           — you are here

Related MCP server: Chrome DevTools MCP

First time? One step only

Double-click initialize_MCP.bat

That's it. It will automatically:

• Install all dependencies (npm install)

• Probe your system for installed AI editors/frameworks

• Present an interactive wizard to configure devcdp and Playwright in your selected editors (Claude, Cursor, Windsurf, Zed)

• Create a debug-chrome.bat shortcut on your Desktop

• Save configuration cleanly without creating backup clutter

Then restart your AI editor/client and you're ready.

After setup — daily workflow

Every debugging session is just 3 steps:

1. Double-click  →  debug-chrome.bat  (on your Desktop)
2. Navigate      →  go to your app in that Chrome window
3. Tell your AI  →  "debug why [X] is broken"

The AI handles everything else automatically.

How it works

AI Editor / Client (Cursor/Windsurf/Zed/Claude)
  ├── devcdp MCP      →  reads console, network, DOM, runs breakpoints
  └── Playwright MCP  →  clicks buttons, fills forms, navigates pages
          │
          └──▶ Chrome (port 9222)
                  └──▶ Your app

The AI uses Playwright to reproduce the bug automatically. If Playwright can't do a step (e.g. captcha, SSO login), devcdp asks you to do it manually — then watches what you click/type and resumes automatically from there.

What the AI can see and do

🖥 Console

• All console.log, warn, error output

• Unhandled exceptions with file, line, and stack trace

• Run any JavaScript directly in the page

🌐 Network

• Every HTTP request — URL, method, status, timing

• Full response bodies

• Wait for a specific API call to complete (no polling)

🏗 DOM

• Query elements by CSS selector

• Read attributes, text, computed styles

• Track DOM mutations after any action

📜 Sources

• List all loaded JavaScript files

• Read full source of any script (supports start/end line ranges)

🐛 Debugger

• Set breakpoints (with optional conditions)

• Step over / into / out of functions

• Inspect all variables in scope (formatted as clean key-value pairs)

• Evaluate expressions at a breakpoint

🤝 Manual fallback

• If automation can't click something, the AI asks you to do it

• Every click, input, navigation you make is captured automatically

• The AI resumes where it left off after your action

Example conversations

UI bug

"The Save button on the invoice screen does nothing. Fix it."

The AI navigates → clicks Save → reads the error → sets a breakpoint → steps through → finds the bug → tells you exactly which line to fix.

API failure

"My orders page shows a blank table. The API might be failing."

The AI opens the page → waits for the API call → reads the 401 response → checks the auth header → explains why it's failing.

Manual fallback in action

"Debug the login flow — it breaks after SSO redirect."

The AI automates what it can → hits the SSO page it can't control → asks you: "Please complete the SSO login manually" → you log in → the AI detects your actions → reads what happened → continues.

Troubleshooting

Hammer 🔨 / Plugins icon not showing in your AI Editor

• Fully restart/reload your AI editor to force it to re-parse the MCP config.

• If still missing, re-run initialize_MCP.bat.

"Not connected to Chrome"

• Make sure you launched Chrome using debug-chrome.bat, not your regular Chrome.

• Visit http://localhost:9222/json in any browser — you should see a JSON list of tabs.

• Only one Chrome instance can use port 9222 — close others first.

initialize_MCP.bat shows an error

• "Node.js not installed" → download from https://nodejs.org (LTS version).

• "npm install failed" → check your internet connection and try again.

• Try right-clicking initialize_MCP.bat → "Run as administrator".

Playwright and devcdp conflict

• Both connect to Chrome via CDP — occasionally one evicts the other.

• If tools return stale data, tell the AI: "reconnect devtools".

• The AI will reconnect and continue.

Security note

debug-chrome.bat launches Chrome with --disable-web-security. Only use this window for development. Never log into personal accounts (banking, email) in this Chrome window. It uses a separate profile (C:\temp\chrome-debug) so it stays isolated from your regular Chrome.

Requirements