Chrome DevTools MCP

What is Chrome DevTools MCP about?

Chrome DevTools MCP enables AI coding assistants to control and inspect a live Chrome browser through the Model‑Context‑Protocol. It bridges the gap between language models and the full power of Chrome DevTools, allowing agents to perform reliable automation, deep debugging, and detailed performance profiling.

How to use Chrome DevTools MCP?

Install the server – run the package with npx:
```
npx chrome-devtools-mcp@latest
```

Add the server to your MCP client (example for a generic client):

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

Use the client‑specific commands to register the server (Claude Code, Cline, Copilot, Cursor, Gemini, etc.) as shown in the README.
Issue prompts to the client, e.g., Check the performance of https://developers.chrome.com, and the server will launch Chrome, execute the requested actions, and return results.

Key features of Chrome DevTools MCP

Performance insights – record traces, analyze metrics, and extract actionable recommendations.
Advanced debugging – inspect network requests, capture screenshots, read console messages, and evaluate scripts.
Reliable automation – powered by Puppeteer, with automatic waiting for action results.
Rich toolset – includes input automation (click, drag, fill, etc.), navigation, emulation (CPU, network, viewport), performance tracing, network inspection, and debugging utilities.
Configurable – headless mode, custom Chrome executable, isolated user‑data directory, and channel selection (stable, canary, beta, dev).

Use cases of Chrome DevTools MCP

Automated UI testing – AI agents can drive a browser, interact with elements, and verify outcomes.
Performance profiling – record page loads, identify bottlenecks, and suggest optimizations.
Live debugging – fetch console logs, network traffic, and DOM state during a session.
Continuous integration – embed the MCP server in CI pipelines to run headless tests and performance checks.
Agent‑assisted development – let coding assistants execute code in a real browser context to validate snippets or troubleshoot issues.

FAQ

Do I need Chrome installed? Yes, a current stable Chrome (or canary/beta) must be available on the host machine.
Can it run without a UI? Set --headless (default false) to run Chrome in headless mode.
How do I connect to an already running Chrome instance? Use the --browserUrl (or -u) option with the remote‑debugging URL.
Is my browsing data exposed? The server grants full access to the browser instance; avoid using it with sensitive data unless you trust the MCP client.
What if my environment uses sandboxing? Disable sandboxing for this server or connect to an external Chrome instance via --browserUrl.
How do I clean up the user profile after a run? Enable --isolated=true to create a temporary profile that is removed when the browser closes.

chrome-devtools-mcp lets your coding agent (such as Gemini, Claude, Cursor or Copilot) control and inspect a live Chrome browser. It acts as a Model-Context-Protocol (MCP) server, giving your AI coding assistant access to the full power of Chrome DevTools for reliable automation, in-depth debugging, and performance analysis.

Key features

Get performance insights: Uses Chrome DevTools to record traces and extract actionable performance insights.
Advanced browser debugging: Analyze network requests, take screenshots and check the browser console.
Reliable automation. Uses puppeteer to automate actions in Chrome and automatically wait for action results.

Disclaimers

chrome-devtools-mcp exposes content of the browser instance to the MCP clients allowing them to inspect, debug, and modify any data in the browser or DevTools. Avoid sharing sensitive or personal information that you don't want to share with MCP clients.

Requirements

Node.js 22 or newer.
Chrome current stable version or newer.
npm.

Getting started

Add the following config to your MCP client:

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

[!NOTE]
Using chrome-devtools-mcp@latest ensures that your MCP client will always use the latest version of the Chrome DevTools MCP server.

MCP Client configuration

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

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

Click the button to install:

Or install manually:

Go to Cursor Settings -> MCP -> New MCP Server. Use the config provided above.

Your first prompt

Enter the following prompt in your MCP Client to check if everything is working:

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

Your MCP client should open the browser and record a performance trace.

[!NOTE]
The MCP server will start the browser automatically once the MCP client uses a tool that requires a running browser instance. Connecting to the Chrome DevTools MCP server on its own will not automatically start the browser.

Tools

Input automation (7 tools)
- click
- drag
- fill
- fill_form
- handle_dialog
- hover
- upload_file
Navigation automation (7 tools)
Emulation (3 tools)
Performance (3 tools)
Network (2 tools)
- get_network_request
- list_network_requests
Debugging (4 tools)

Configuration

The Chrome DevTools MCP server supports the following configuration option:

--browserUrl, -u Connect to a running Chrome instance using port forwarding. For more details see: https://developer.chrome.com/docs/devtools/remote-debugging/local-server.
- Type: string
--headless Whether to run in headless (no UI) mode.
- Type: boolean
- Default: false
--executablePath, -e Path to custom Chrome executable.
- Type: string
--isolated If specified, creates a temporary user-data-dir that is automatically cleaned up after the browser is closed.
- Type: boolean
- Default: false
--channel Specify a different Chrome channel that should be used. The default is the stable channel version.
- Type: string
- Choices: stable, canary, beta, dev

Pass them via the args property in the JSON configuration. For example:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest"
        "--channel=canary",
        "--headless=true",
        "--isolated=true",
      ]
    }
  }
}

You can also run npx chrome-devtools-mcp@latest --help to see all available configuration options.

Concepts

User data directory

chrome-devtools-mcp starts a Chrome's stable channel instance using the following user data directory:

Linux / MacOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
Window: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

The user data directory is not cleared between runs and shared across all instances of chrome-devtools-mcp. Set the isolated option to true to use a temporary user data dir instead which will be cleared automatically after the browser is closed.

Known limitations

Operating system sandboxes

Some MCP clients allow sandboxing the MCP server using macOS Seatbelt or Linux containers. If sandboxes are enabled, chrome-devtools-mcp is not able to start Chrome that requires permissions to create its own sandboxes. As a workaround, either disable sandboxing for chrome-devtools-mcp in your MCP client or use --connect-url to connect to a Chrome instance that you start manually outside of the MCP client sandbox.

Chrome DevTools MCP