DevCDP

MCP server by Dayananda-D

Inspect and debug web pages through Chrome DevTools: console, network, DOM, source maps, breakpoints and live variables.

Runs locally (Runs on your machine: its page has the install command)Runs with npx

Install DevCDP

Runs on your machine. Your client starts it with this command:

npx -y devcdp

Needs Node.js on your computer. The setup steps below show where the command goes in each client.

  • DEVCDP_CHROME_PATH optional Path to the Chrome executable, when it is not on the default install path.
  • DEVCDP_LOG_LEVEL optional Server log verbosity on stderr: debug, info, warn or error.

Share this server

Opens this page, with the install command and setup steps.

mcp.tc/i/devcdp

About

DevCDP gives an AI assistant access to Chrome DevTools. According to its registry description, it covers the console, network activity, the DOM, source maps, breakpoints and live variables, so the assistant can debug a running page with real browser data.

It runs locally over stdio and is started with npx from the devcdp npm package. No API key is required. Chrome must be installed. If it is not at the default path, set DEVCDP_CHROME_PATH. DEVCDP_LOG_LEVEL controls log verbosity on stderr.

What you can do

  • Read browser console output
  • Inspect network activity
  • Inspect the DOM
  • Work with source maps
  • Use breakpoints and read live variables

Tools

Local servers list their tools once they’re running, and this one doesn’t publish its list in advance. Your client shows them after you add it.

Example prompts

  • Check the browser console for errors on this page.

  • Show me the failing network requests on the page I have open.

  • Set a breakpoint in my checkout handler and show the live variables.

  • Inspect the DOM of the login form and tell me why the button is hidden.

Set up

Every client starts DevCDP on your machine with the same command. Pick yours; the page remembers your choice.

Claude Code

  1. Run this in a terminal, in your project folder:
claude mcp add --transport stdio devcdp -- npx -y devcdp
  1. Start Claude Code and type /mcp. devcdp should show as connected.

Add --scope user to make it available in every project.

Claude Desktop

  1. Open Settings → Developer → Edit Config. It opens claude_desktop_config.json. Add:
claude_desktop_config.json
{
  "mcpServers": {
    "devcdp": {
      "command": "npx",
      "args": [
        "-y",
        "devcdp"
      ]
    }
  }
}
  1. Save the file and restart Claude Desktop.

Needs Node.js on your computer. The file lives in ~/Library/Application Support/Claude/ on macOS and %APPDATA%\Claude\ on Windows.

Cursor

Or add it by hand to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (this project):

mcp.json
{
  "mcpServers": {
    "devcdp": {
      "command": "npx",
      "args": [
        "-y",
        "devcdp"
      ]
    }
  }
}

Needs Node.js on your computer.

VS Code

Or from a terminal:

code --add-mcp '{"name":"devcdp","type":"stdio","command":"npx","args":["-y","devcdp"]}'

Or commit it to the repo in .vscode/mcp.json:

.vscode/mcp.json
{
  "servers": {
    "devcdp": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "devcdp"
      ]
    }
  }
}

Needs Node.js on your computer.

Devin Desktop

  1. Add it to ~/.config/devin/mcp_config.json (macOS and Linux) or %APPDATA%\devin\mcp_config.json (Windows):
mcp_config.json
{
  "mcpServers": {
    "devcdp": {
      "command": "npx",
      "args": [
        "-y",
        "devcdp"
      ]
    }
  }
}
  1. Refresh the MCP server list in Cascade.

Devin Desktop is the new name for Windsurf.

Codex

codex mcp add devcdp -- npx -y devcdp

Or edit ~/.codex/config.toml directly:

config.toml
[mcp_servers.devcdp]
command = "npx"
args = ["-y", "devcdp"]

Needs Node.js on your computer.

Gemini CLI

gemini mcp add devcdp npx -- -y devcdp

This adds it to the current project. Add -s user to use it everywhere.

Any client

Most clients that start local servers accept this shape:

{
  "mcpServers": {
    "devcdp": {
      "command": "npx",
      "args": [
        "-y",
        "devcdp"
      ]
    }
  }
}

Zed puts servers under context_servers in its settings, with the same command, args and env fields.

Needs Node.js on your computer.

Embed

Show DevCDP in a README or on your site. Each embed links to this page, uses the server’s own install command, and sets no cookies. How embeds work

The card, the iframe and the JSON are in English. Add ?lang=it, fr, de or es to their address for another language.

README badge

Badge preview, lightBadge preview, dark
Markdown
[![DevCDP on mcp.tc](https://mcp.tc/i/devcdp/badge.svg)](https://mcp.tc/i/devcdp)
HTML
<a href="https://mcp.tc/i/devcdp"><img src="https://mcp.tc/i/devcdp/badge.svg" alt="DevCDP on mcp.tc" height="20"></a>

It follows the reader’s light or dark mode. Add ?theme=light or ?theme=dark to fix it, or ?style=compact to show the mark without the word.

Website card

HTML
<script src="https://mcp.tc/w/devcdp.js" async></script>

The card appears where the tag is. Add data-theme="dark" or data-size="compact" to the tag to change it. The file holds everything it needs, so it makes no other requests and sets no cookies.

iframe

HTML
<iframe src="https://mcp.tc/embed/devcdp" title="DevCDP on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

Use it on pages that don’t allow scripts. Add ?theme=light or ?theme=dark to the address to fix the colors.

JSON

The listing as data for your own pages and tools: name, tagline, install command, tools and the “Add to” links. Any site can read it (CORS is open).

https://mcp.tc/i/devcdp.json

What each field means

AI prompt

Paste this into an AI coding assistant, such as Claude Code or Cursor, and it adds the DevCDP card to your site.

Markdown
Add the mcp.tc card for DevCDP, an MCP server, to my website. It is one static script: no build step, no package to install, no cookies.

Put this tag where the card should appear. The card renders right before it:

```html
<script src="https://mcp.tc/w/devcdp.js" async></script>
```

To show the card somewhere else, put this placeholder there and load the same script once, for example before `</body>`. Keep the link inside: visitors without JavaScript see it.

```html
<div data-mcptc="devcdp"><a href="https://mcp.tc/i/devcdp">DevCDP on mcp.tc</a></div>
```

Options:
- `data-theme="light"` or `"dark"` on the tag or the placeholder fixes the colors. Without it, the card follows the visitor’s light or dark mode.
- `data-size="compact"` gives a smaller card without the tagline.
- The CSS variable `--mcptc-max-width` on the placeholder or a parent sets the width (default `520px`).
- `?lang=` on the script URL sets the card’s language: `en`, `it`, `fr`, `de` or `es`.

If the site has a Content Security Policy, allow `script-src https://mcp.tc` and `img-src data:` (the icon is inline).

For a README or other Markdown docs, use the badge instead:

```markdown
[![DevCDP on mcp.tc](https://mcp.tc/i/devcdp/badge.svg)](https://mcp.tc/i/devcdp)
```

Reference: https://mcp.tc/embed

Change history

This server runs on your computer, so we follow its npm package: each new version shows up here, with edits by its owner.

Follow DevCDP and we’ll email you when something changes.

  1. , Automatic check

    Tracking started: version 5.0.1.

FAQ

Can I paste mcp.tc/i/devcdp into my MCP client?

No. DevCDP runs on your own computer, started by your client, so it has no web address to connect to. The quick link is the page to share; the install command is npx -y devcdp.

Does DevCDP need an API key?

No. It doesn’t declare any keys or environment variables. It runs with your user account’s permissions, so check what its tools can reach.

Is DevCDP a remote or a local server?

Local. Your client starts it as a process on your computer with npx -y devcdp, which needs Node.js.

What can DevCDP do?

You can read browser console output, inspect network activity and inspect the DOM.

Which clients can use it?

Any client that starts local servers: Claude Code, Claude Desktop, Cursor, VS Code, Devin Desktop, Codex, Gemini CLI, Zed and others. claude.ai and ChatGPT only connect to remote servers.

Does mcp.tc track changes to DevCDP?

Partly. It runs on your computer, so we follow its npm package: its History tab shows each new version and edits by its owner. Follow the listing to get an email when it changes.

Who wrote this page?

mcp.tc’s robot read DevCDP’s public metadata (its package and repository pages), and an AI model drafted the text from it. A person reviews anything the checks can’t confirm. The text can still be wrong, so if you spot a mistake, use Report this listing on this page.

mcp.tc isn’t affiliated with Dayananda-D. This page was built from DevCDP’s public metadata, last checked on 5 Oct 2026, and an AI model wrote the description, so it can be wrong. Names and marks belong to their owners. Something off? Report this listing.