Chrome DevTools MCP — Use Cases, Install & Live Demo

Why use it

Key features

Real Chromium — renders the page exactly like your browser
Performance traces with insights (LCP, CLS, render-blocking resources)
Full network tab access — request/response bodies, timing, redirects
DOM snapshots, screenshots, and click/type/scroll actions
Console log capture and live JS evaluation in page context
Maintained by the Chrome DevTools team at Google

Live Demo

What it looks like in practice

chrome-devtools.replay ▶ ready

0/0

Install

Pick your client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.cursor/mcp.json · .cursor/mcp.json

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

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit

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

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "chrome-devtools",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  ]
}

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json

{
  "context_servers": {
    "chrome-devtools": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "chrome-devtools-mcp"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use Chrome DevTools

Diagnose why a page is slow with a Lighthouse-style trace

👤 Frontend and perf engineers ⏱ ~20 min intermediate

When to use: A page feels sluggish and you want Claude to run a trace and point at the actual bottleneck instead of guessing.

Prerequisites

Target URL loads without login (or you handle auth first) — Use navigate_page with a URL; for auth-gated pages, first log in via chrome-devtools click/type tools

Flow

Run a performance trace

Open https://example.com/product/123. Run a performance trace with CPU throttling 4x and a slow-3G network profile. Tell me the LCP, CLS, and TBT.✓ Copied

→ Three metric numbers plus a trace summary
Find the top culprit

What single asset or script contributes most to the LCP delay? Show the request timing.✓ Copied

→ Specific URL identified, with timing breakdown (DNS/connect/TTFB/download)
Propose a concrete fix

What's the cheapest fix that would move LCP under 2.5s? Propose one change (preconnect, preload, defer, lazy, or bundle-split) with specific lines to add.✓ Copied

→ Actionable HTML/JS diff, not a generic list

Outcome: A perf regression with a named cause and a specific fix, verifiable by re-running the trace after you apply it.

Pitfalls

Trace varies run-to-run — one-off numbers mislead — Run the trace 3x and take the median before concluding anything
Local/dev builds differ from production — Trace against a production URL or a CDN-served preview, not localhost with no compression

Combine with: filesystem · github

Verify the feature Claude just coded actually works in a browser

👤 AI-assisted developers closing the loop on their agent ⏱ ~10 min beginner

When to use: Claude just edited some frontend code. Before saying 'done', you want it to open the page, click the button, and confirm it works.

Prerequisites

Dev server running — npm run dev in another terminal; note the URL

Flow

Open the feature and take a screenshot

Open http://localhost:3000/new-feature. Take a screenshot. Describe what you see — does it match the intent?✓ Copied

→ Screenshot plus honest description (might flag 'button is rendered off-screen')
Exercise the interaction

Click the 'Submit' button with test data: {email: '[email protected]'}. Capture the network request that goes out and the response.✓ Copied

→ Network entry with 200 response and matching payload
Check console for errors

Any console errors or warnings during that flow? Include React hydration warnings or missing-key warnings.✓ Copied

→ Clean console, or a specific fix for any warnings found

Outcome: A self-tested feature with a screenshot + network trace as evidence. Closes the 'AI wrote code that doesn't actually work' gap.

Pitfalls

Screenshot looks fine but interaction is broken — Always exercise the user flow (click/type), not just visually inspect
HMR has a race with Claude's screenshot — After navigating, wait for networkidle before asserting anything

Combine with: filesystem · github

Debug why an API call from your frontend is failing

👤 Full-stack devs chasing a 4xx/5xx that 'doesn't happen locally' ⏱ ~15 min intermediate

When to use: The browser console shows a failed fetch, and you don't trust your own memory about what headers/body are being sent.

Flow

Trigger the failing call

Open the page, perform the action that fails. Capture the failing request's full URL, method, headers, and body.✓ Copied

→ Exact request payload visible — no guessing
Compare with expected

The backend expects header X-Client-Id and a JSON body with field user_id. What's actually going out? Diff it.✓ Copied

→ Specific missing or wrong field identified
Fix and re-verify

Fix the source code so the request matches. Then reload the page and confirm the call now returns 200.✓ Copied

→ Final network entry shows 200, not the original error

Outcome: A fixed API call with network-tab proof that it now works — no more 'works on my machine'.

Pitfalls

Session cookies or CORS preflight mask the real request — Don't just look at the failing request — check the preflight OPTIONS and the Set-Cookie history

Combine with: filesystem · postgres

Spot visual regressions after a CSS refactor

👤 Frontend devs doing design-system migrations ⏱ ~20 min intermediate

When to use: You refactored CSS/tokens. You want to catch 'oh no the button is now pink' before merging.

Flow

Snapshot key pages on main

On http://localhost:3000 (main branch), screenshot /, /pricing, /dashboard. Save into /tmp/visual/main/.✓ Copied

→ 3 screenshots saved
Snapshot same pages on your branch

Switch to branch 'css-refactor' and restart dev server. Screenshot the same 3 pages to /tmp/visual/branch/.✓ Copied

→ 3 matching-path screenshots saved
Diff and describe

For each pair, compare them visually and describe any change. Ignore pixel-level anti-aliasing; flag anything a designer would notice.✓ Copied

→ Per-page diff summary, not 'looks the same'

Outcome: A review-ready diff that catches unintended visual changes.

Pitfalls

Dynamic content (dates, randomized greetings) changes between shots — Stub time and freeze RNG, or crop those regions out

Combine with: filesystem · github

Combinations

Pair with other MCPs for X10 leverage

chrome-devtools + filesystem

Edit source → reload page → verify, in a tight loop

Open localhost:3000/checkout. The form's submit button is wrong color. Find the relevant CSS in src/ and fix it, then reload and screenshot to confirm.✓ Copied

chrome-devtools + github

Reproduce a bug from an issue, verify fix, open PR with screenshot

Issue #482 reports a layout bug on /pricing at 375px width. Reproduce it with chrome-devtools (screenshot at 375px), fix the CSS, open a PR including the before/after screenshots.✓ Copied

chrome-devtools + sentry

Reproduce a real user error found in Sentry, in your local browser

For Sentry issue WEB-3a91, the breadcrumbs show the user navigated to /cart then clicked 'Checkout'. Replay that in chrome-devtools and capture what actually breaks.✓ Copied

Tools

What this MCP exposes

Tool	Inputs	When to call	Cost
navigate_page	url: str, wait_for?: 'load'\|'networkidle'	Start any page interaction	free
take_screenshot	fullPage?: bool, selector?: str	Visual confirmation after navigating or interacting	free
take_snapshot	none	Structured page content as text — better than screenshots for Claude to reason about	free
click	selector: str \| uid: str	Click an element by CSS selector or snapshot UID	free
fill	selector: str, value: str	Type into an input field	free
evaluate_script	script: str	Run arbitrary JS in page context for inspection	free
list_console_messages	none	Read console logs and errors from the page	free
list_network_requests	filter?: str	Inspect all XHR/fetch that happened	free
get_network_request	requestId: str	Get full headers and body of one request	free
performance_start_trace	reload?: bool, cpu_throttle?: number, network?: 'slow3g'\|'fast3g'	Begin a performance recording	free
performance_stop_trace	none	Stop and analyze a running performance trace	free
emulate_cpu	rate: number	Simulate slow devices (4x = mid-tier mobile)	free
emulate_network	profile: 'slow3g'\|'fast3g'\|'offline'	Test under constrained networks	free
new_page / close_page / select_page	various	Manage multiple tabs	free

Cost & Limits

What this costs to run

API quota: None — runs a local browser
Tokens per call: Snapshots and network dumps can be large (5-30k tokens); take_snapshot is usually more token-efficient than full screenshots plus DOM dump
Monetary: Free
Tip: Prefer take_snapshot over take_screenshot for Claude to reason about structure — snapshots are compact and text-based. Save screenshots for human review.

Security

Permissions, secrets, blast radius

Credential storage: None at the MCP layer; if you log into a site during a session, cookies live in the Chromium profile until you close it

Data egress: The Chromium browses the open web on your behalf — targets receive your IP. No telemetry to Google beyond whatever Chromium's defaults send.

Never grant: never point at your real browser profile containing saved logins/passwords

If you ask Claude to 'log into site X', it will store a session cookie in the browser profile. Isolate that profile from your personal one.
Never evaluate_script code you don't understand — it runs in the page's origin with full access.

Troubleshooting

Common errors and fixes

Chromium won't launch — missing dependencies on Linux

Install missing system libs: sudo apt-get install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libxkbcommon0 libasound2. The MCP bundles Chromium but not all its runtime deps.

Verify: Run `npx chrome-devtools-mcp --version` — errors name the missing lib

navigate_page times out on slow page

Pass wait_for: 'load' instead of the default networkidle; or increase timeout in the client's MCP config.

click fails: element not found

The selector is stale or hidden. Re-call take_snapshot first and use the fresh UID from the snapshot.

Performance trace is empty

You need to either reload the page during the trace (reload: true) or interact with it — an idle tab produces no timeline.

Alternatives

Chrome DevTools vs others

Alternative	When to use it instead	Tradeoff
Playwright MCP	You need cross-browser testing (Firefox, WebKit) or prefer Playwright's API surface	Similar power; chrome-devtools has deeper perf tracing, playwright has broader automation
Puppeteer MCP	You want the lower-level Puppeteer API	Chrome-only, overlaps heavily with chrome-devtools MCP
browser-tools MCP	You want to connect to your existing Chrome via DevTools Protocol extension	No fresh sandbox — uses your real browser session, with its logged-in state

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills