cdp-tools-mcp
cdp-tools-mcp gives AI agents comprehensive Chrome DevTools Protocol capabilities across debugging, browser automation, server management, and issue tracking.
Runtime Debugging
Connect to Chrome or Node.js debuggers simultaneously via CDP
Set line, conditional, logpoint, DOM mutation, event, and XHR breakpoints
Control execution: pause, resume, step over/into/out
Inspect call stacks, variables, scopes; evaluate expressions
Search source code by regex, load source maps for TypeScript/transpiled code
Browser Automation & Interaction
Launch/manage Chrome (headless, custom ports, viewport, flags)
Navigate pages, manage multiple tabs (create, switch, close)
Interact with elements: click, type, hover, press keys, drag, scroll, pinch zoom
Take screenshots (full page, viewport, element) or export PDFs
Smart element discovery with CSS selector extensions (
:has-text(),:text())
DOM & Content Inspection
Query DOM, get element properties, take full DOM snapshots
Extract page text (outline, full, section modes)
Find interactive elements (links, buttons, inputs) with filtering
Detect/dismiss modals; verify UI integrity (dead buttons, overflow, broken links)
Console & Network Monitoring
Capture, search, and filter console logs and network requests
Inspect response bodies, filter by type/method/status
Set network throttling conditions (offline, slow-3g, fast-4g, etc.)
Recording & Replay
Record mouse/keyboard/navigation interactions with a visual overlay
Replay sequences with configurable pause points and timeouts
Export recordings as Playwright (
.spec.ts) or Puppeteer (.test.js) testsConditional branching in sequences based on selectors, URLs, cookies, or localStorage
Storage Management
Get/set/clear cookies, localStorage, and sessionStorage
Server Management
Start, stop, restart, and monitor dev servers (npm, Docker, Docker Compose, any command)
Auto-restart with exponential backoff; monitor ports for failures
Cross-session server sharing with file-based log access
Issues Tracking
Create and track bugs/features linked to recorded reproduction sequences
Work on issues with auto-replay; resolve with automated verification
Multi-Agent & Connection Management
Multiple simultaneous debugger connections (e.g., Chrome + Node.js)
Tab-level isolation for nested agents managing their own tabs
Automatic stale connection cleanup
Configuration & Utilities
Switch local/global configs, toggle individual tools on/off
Make HTTP requests from browser context (with session/cookies) or directly from the server
Web dashboard for monitoring all sessions
Debug logging toggle; kill/reset Chrome instances as needed
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@cdp-tools-mcpSet a breakpoint on line 42 of app.js and inspect the user variable."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
devharness
MCP server. Your agent runs the app, sees what happened, and redoes none of it by hand.
npx devharness@latestWas
cdp-tools-mcp. That name described the transport. CDP is now one of three things this does. Migrating.
Why
Three things burn a debugging session, and only the first is about seeing.
You are the eyes. You start the app, click the thing, paste the stack trace back into chat, reload and report whether it worked.
Everything gets re-driven by hand. Relaunch the browser, log in again, refill the form, click back to the screen where the bug lives — every iteration. Slow, and the retyped arguments drift from what actually ran.
One failure stalls the whole session. A dead dev server, a missing parameter, a wedged tool: the agent stops and waits for you.
devharness closes all three. Real execution instead of guesses. Every call it has already made is replayable by index. Failures have recovery paths the agent takes itself.
Related MCP server: Chrome DevTools MCP
What it does
24 tool modules. 802 tests across 57 files, ~7s.
See — pause real execution and read the real frame: breakpoints (line,
conditional, logpoint, DOM mutation, event, XHR), call stack and scope, source
maps so TypeScript breakpoints hit TypeScript lines. Chrome and Node.js
(node --inspect), both at once. Console, network, storage, DOM. content verify
reports dead buttons, dead links, small touch targets, and overflow clipping from
CDP facts, not heuristics.
Repeat — every tool response carries its own history index:
**Repeat:** replay({ action: 'repeat', indices: [58] })indices takes a list, so four steps re-run in one call. Whatever the agent
already did, it redoes by reference rather than by retyping. Worth keeping?
replay({ action: 'create', ... }) promotes it to a named sequence, exportable as
a Playwright or Puppeteer test.
Recover — a call that fails validation comes back with a continuationToken
and the list of what was missing; the retry sends only the missing field. A
validated call blocked by a guard is already recorded, so acknowledging the block
and replaying resumes the exact call. If the server itself wedges,
config({ action: 'restart' }) respawns it and replays the MCP handshake, so the
host session never reconnects.
Prove — dev servers run under management (npm, flask, docker, compose) with
port monitoring. Issues bind a bug to its reproduction: workOn navigates back to
the failing state, resolve replays the sequence against the fix.
Design decisions
A dead server blocks tools rather than warning. An agent clicking away at a dead server produces a long, confident, entirely fictional debugging session. Configurable:
inform,error,block.Closing an issue needs a human click.
resolvewaits on a browser overlay no agent can dismiss. Recording findings is automated; declaring something actually fixed stays a human judgement.Repeat is on every response, not just failures. Recovery and ordinary re-running are the same mechanism, so there's nothing extra to reach for when the session gets long.
getVariablesdegrades, never errors. full → reduced depth → names → counts. A truncated answer that says it truncated beats a tool error.Connections are named. Every tool takes
connectionReason, so nested agents each drive their own tab in one Chrome without fighting over "the current page".Text beats screenshots.
extractTextcosts a fraction of an image and answers most page questions. Screenshot when the question is genuinely visual.
Setup
Claude Code:
claude mcp add devharness -- npx devharness@latestClaude Desktop:
{
"mcpServers": {
"devharness": {
"command": "npx",
"args": ["-y", "devharness@latest"]
}
}
}Other clients — npx devharness@latest over stdio.
As a Claude Code plugin — this registers the server for you:
/plugin marketplace add InDate/indate-tools
/plugin install devharness@indate-toolsThe plugin pins an exact server version rather than tracking @latest, so what
you installed is what runs until you update it.
Skill
Bundled Agent Skill at plugin/skills/devharness/. Same
guidance as docs/instructions.md, split for progressive disclosure: name and
description at session start, full catalogue only when debugging starts.
mkdir -p .claude/skills
ln -s ../../node_modules/devharness/plugin/skills/devharness .claude/skills/devharnessInstalling as a Claude Code plugin does this for you.
Example
Node service:
1. node --inspect=9229 app.js
2. connectDebugger({ reference: "api", port: 9229 })
3. breakpoint({ action: 'set', connectionReason: "api", file: "user.ts", line: 42 })
4. Trigger the request.
5. inspect({ action: 'getVariables', connectionReason: "api" })
→ real frame: what userId and userRole actually wereBrowser fix:
1. launchChrome({ reference: "app" }) # launches and connects
2. Record the five clicks that reproduce it.
3. Fix the code.
4. Replay → pass or fail, against the real appdocs/GUIDE.md for depth, docs/instructions.md for the tool reference. examples/test-app ships eight seeded bugs to exercise it against known-wrong code.
vs Chrome DevTools MCP
Chrome DevTools MCP is better at performance tracing, device emulation, advanced browser automation.
devharness adds breakpoint debugging with variable inspection, Node.js targets, simultaneous connections, logpoints, server lifecycle, and — the part that compounds over a long session — replayable call history and self-service recovery.
Browser-only and performance-shaped → theirs. Backend code, stepping execution, long sessions where the agent keeps re-driving the same setup → this.
Migrating
cdp-tools-mcp is deprecated on npm and points here. Tools unchanged. Package,
repo, and skill renamed.
-"args": ["-y", "cdp-tools-mcp@latest"]
+"args": ["-y", "devharness@latest"]Your MCP server name (cdp-tools, or whatever you called it) is yours and keeps
working. Renaming it is cosmetic — but tools are addressed as
mcp__<server-name>__<tool>, so update project docs if you do.
State moved .cdp-tools/ → .devharness/ in 0.9.0. Migrates itself on first
run; profiles, config, sequences, and issues carry over. DEVHARNESS_DIR
supersedes CDP_TOOLS_DIR, which still works.
From source
git clone https://github.com/InDate/devharness.git
cd devharness
npm install && npm run build && npm testContributing
Issues and PRs welcome. Reporting a bug? Attach a recorded reproduction sequence.
License
MIT
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Servers
- Alicense-qualityAmaintenanceEnables AI coding assistants to control and inspect a live Chrome browser through Chrome DevTools. Provides browser automation, performance analysis, debugging capabilities, and network request monitoring.Last updated1,563,37948,685Apache 2.0
- AlicenseAqualityDmaintenanceEnables AI coding assistants to control and inspect a live Chrome browser for automation, debugging, performance analysis, and screenshot capture through Chrome DevTools.Last updated261,563,3793Apache 2.0
- Alicense-qualityDmaintenanceEnables AI coding assistants to control and inspect a live Chrome browser for automation, debugging, performance analysis, network monitoring, and DOM interaction through Chrome DevTools Protocol.Last updated1,563,379Apache 2.0
- AlicenseAqualityCmaintenanceEnables AI assistants to debug JavaScript and TypeScript applications by connecting to Chrome DevTools Protocol-compatible debuggers, allowing them to set breakpoints, step through code, inspect variables, and evaluate expressions with full source map support.Last updated18212Apache 2.0
Related MCP Connectors
Live browser debugging for AI assistants — DOM, console, network via MCP.
Shared debugging memory for AI coding agents
AI-powered browser automation — navigate, click, fill forms, and extract data from any website.
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/InDate/devharness'
If you have feedback or need assistance with the MCP directory API, please join our Discord server