MCP Directory

How to add Chrome DevTools MCP to Cursor

Lets coding agents drive a real Chrome: automate input, read console and network, record performance traces. Paste the config into ~/.cursor/mcp.json and restart Cursor.

Last updated June 14, 2026 · 45k★ · stdio · no auth · official

Cursor config for Chrome DevTools MCP

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

Setup steps

  1. 1Open Cursor → Settings → MCP → Add new MCP server (or edit ~/.cursor/mcp.json directly).
  2. 2Paste the Chrome DevTools MCP config below into the "mcpServers" object.
  3. 3Fill in placeholder secrets, then save.
  4. 4Cursor reloads MCP servers automatically — check Settings → MCP for a green status dot.
  5. 5Ask Cursor to use one of Chrome DevTools MCP's tools to confirm it's connected.

Before you start

  • Node.js LTS version
  • Current stable Google Chrome (or Chrome for Testing) installed
  • npm/npx available on PATH

What Chrome DevTools MCP can do in Cursor

click

Click an element on the page

drag

Drag an element to another element

fill

Fill a single input field

fill_form

Fill multiple form fields in one call

handle_dialog

Accept or dismiss browser dialogs

hover

Hover over an element

press_key

Press a keyboard key

type_text

Type text into the page

Security

Everything in the controlled browser is exposed to the MCP client — pages, logged-in sessions, network traffic — so don't browse sensitive accounts in the automated profile. Google collects usage statistics by default (disable with --no-usage-statistics), and an open remote-debugging port lets any local process control that browser.

Chrome DevTools MCP + Cursor FAQ

Where is the Cursor config file?

Cursor reads MCP servers from ~/.cursor/mcp.json. Paste the Chrome DevTools MCP config there under the "mcpServers" key and restart the client.

Is Chrome DevTools MCP safe to use with Cursor?

Everything in the controlled browser is exposed to the MCP client — pages, logged-in sessions, network traffic — so don't browse sensitive accounts in the automated profile. Google collects usage statistics by default (disable with --no-usage-statistics), and an open remote-debugging port lets any local process control that browser.

Is chrome-devtools-mcp safe to run?

It's official Google tooling and safe to install, but treat the controlled browser as fully visible to your agent: it can read and modify any page, session, or request in that profile. Keep the default separate profile, avoid logging into sensitive accounts there, and note usage statistics are collected by default (--no-usage-statistics disables).

Can it attach to my already-running Chrome with my logins?

Yes. On Chrome 144+ enable chrome://inspect/#remote-debugging and start the server with --autoConnect. On older versions, launch Chrome with --remote-debugging-port=9222 and a non-default --user-data-dir, then pass --browser-url=http://127.0.0.1:9222 — but remember the debug port gives any local process browser control.

How is this different from Playwright MCP?

chrome-devtools-mcp is Chrome-only but goes deeper into DevTools: performance traces with insights, Lighthouse audits, heap-snapshot diffing, and source-mapped console traces. Pick Playwright MCP for cross-browser automation; pick this for debugging and performance work in Chrome.

View repo Full Chrome DevTools MCP page