MCP Directory

How to add Chrome DevTools MCP to Windsurf

Lets coding agents drive a real Chrome: automate input, read console and network, record performance traces. Paste the config into ~/.codeium/windsurf/mcp_config.json and restart Windsurf.

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

Windsurf 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 Windsurf → Cascade → the hammer/MCP icon → Configure (or edit ~/.codeium/windsurf/mcp_config.json).
  2. 2Paste the Chrome DevTools MCP config below.
  3. 3Fill in placeholder secrets, then save.
  4. 4Click Refresh in the MCP panel.
  5. 5Chrome DevTools MCP's tools become available to Cascade.

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 Windsurf

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 + Windsurf FAQ

Where is the Windsurf config file?

Windsurf reads MCP servers from ~/.codeium/windsurf/mcp_config.json. Paste the Chrome DevTools MCP config there under the "mcpServers" key and restart the client.

Is Chrome DevTools MCP safe to use with Windsurf?

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