Chrome DevTools MCPvf.sr

listing.by · home.legend.verified

Control and inspect a live Chrome browser: record performance traces, analyze network requests, and read console messages.

state.local.long (state.local.title)listing.badge.runs_with

listing.install

listing.local.explain

npx -y chrome-devtools-mcp@latest

listing.local.needs listing.local.note

act.add_to a11y.new_tabact.add_to a11y.new_tab

listing.share.h

listing.share.p_local

mcp.tc/i/chrome-devtools

listing.about

Lets a coding agent control and inspect a live Chrome browser through Chrome DevTools. It can record performance traces and extract insights, analyze network requests, take screenshots, and read console messages with source-mapped stack traces. Actions are automated with Puppeteer, which waits for results.

Runs locally over stdio with npx (chrome-devtools-mcp). Requires Node.js LTS, npm and a current stable Chrome. No account or API key is needed. Google collects usage statistics by default, and performance tools may send trace URLs to the CrUX API. Both can be disabled with flags.

listing.can

  • Record performance traces and extract insights
  • Analyze network requests
  • Read console messages with source-mapped stack traces
  • Take screenshots of pages
  • Automate browser actions via Puppeteer
  • Run in slim or headless mode for basic tasks
  • Connect to a running Chrome instance

listing.tools

listing.notools.local

listing.prompts

  • Check the performance of https://developers.chrome.com

  • Open my local site and list any console errors

  • Show failed network requests on this page

  • Take a screenshot of the checkout page in Chrome

listing.setup.h

listing.setup.local

Claude Code

  1. Run this in a terminal, in your project folder:
claude mcp add --transport stdio chrome-devtools -- npx -y chrome-devtools-mcp@latest
  1. Start Claude Code and type /mcp. chrome-devtools 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": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest"
      ]
    }
  }
}
  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

Add to Cursor a11y.new_tab

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

mcp.json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest"
      ]
    }
  }
}

Needs Node.js on your computer.

VS Code

Install in VS Code a11y.new_tab

Or from a terminal:

code --add-mcp '{"name":"chrome-devtools","type":"stdio","command":"npx","args":["-y","chrome-devtools-mcp@latest"]}'

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

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

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": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest"
      ]
    }
  }
}
  1. Refresh the MCP server list in Cascade.

Devin Desktop is the new name for Windsurf.

Codex

codex mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest

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

config.toml
[mcp_servers.chrome-devtools]
command = "npx"
args = ["-y", "chrome-devtools-mcp@latest"]

Needs Node.js on your computer.

Gemini CLI

gemini mcp add chrome-devtools npx -- -y chrome-devtools-mcp@latest

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": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest"
      ]
    }
  }
}

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

Needs Node.js on your computer.

listing.faq

Can I paste mcp.tc/i/chrome-devtools into my MCP client?

No. Chrome DevTools MCP 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 chrome-devtools-mcp@latest.

Does Chrome DevTools MCP 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 Chrome DevTools MCP a remote or a local server?

Local. Your client starts it as a process on your computer with npx -y chrome-devtools-mcp@latest, which needs Node.js.

What can Chrome DevTools MCP do?

You can record performance traces and extract insights, analyze network requests and read console messages with source-mapped stack traces.

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.

Who wrote this page?

mcp.tc's robot read Chrome DevTools MCP'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.

listing.em.h

listing.em.lead_local listing.em.how

listing.em.badge

em.prev_lightem.prev_dark
Markdown
[![Chrome DevTools MCP on mcp.tc](https://mcp.tc/i/chrome-devtools/badge.svg)](https://mcp.tc/i/chrome-devtools)
HTML
<a href="https://mcp.tc/i/chrome-devtools"><img src="https://mcp.tc/i/chrome-devtools/badge.svg" alt="Chrome DevTools MCP on mcp.tc" height="20"></a>

listing.em.badge_note

listing.em.widget

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

listing.em.widget_note

iframe

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

listing.em.iframe_note

JSON

listing.em.json_local

https://mcp.tc/i/chrome-devtools.json

listing.em.fields

listing.related

listing.more_in

  • Playwright MCPvf.sr

    Microsoft

    state.local.label (state.local.title)

    Automate a real browser through Playwright accessibility snapshots instead of screenshots.

    mcp.tc/i/playwright

  • Browser Use

    Browser Automation

    state.local.label (state.local.title)

    Drive a real Chrome browser with an AI agent to navigate sites, fill forms and extract data.

    mcp.tc/i/browser-use

  • BrowserTools MCP

    AgentDesk AI

    state.local.label (state.local.title)

    Read live console logs, network requests, screenshots and Lighthouse audits from your own Chrome session.

    mcp.tc/i/browser-tools

  • Agent Infra Browser

    ByteDance

    state.local.label (state.local.title)

    Give an assistant control of a browser through a local MCP server from the Agent TARS and UI-TARS project.

    mcp.tc/i/agent-infra-browser

  • Cloudflare Browser Runvf.sr

    Cloudflare

    state.auth.label (state.auth.title)

    Fetch pages, convert them to markdown, take screenshots and crawl sites with Cloudflare's headless browser.

    mcp.tc/i/cloudflare-browser

  • Browserbase

    Browser Automation

    state.key.label (state.key.title)

    Control cloud browsers through Stagehand: navigate pages, act on elements, observe the page and extract data.

    mcp.tc/i/browserbase

listing.disclaimer_checked