Chrome DevTools

You can use the Chrome DevTools MCP server to control and inspect a live Chrome browser from your AI coding assistant. It provides reliable automation, deep debugging, and performance analysis by exposing Chrome DevTools through the Model-Context-Protocol (MCP). This lets you automate browser actions, trace performance, capture screenshots, and inspect network activity from your MCP client.

How to use

To use the Chrome DevTools MCP server, first ensure your MCP client is configured to connect to a local or remote MCP server. The server runs as a local process you start with a simple command, and it will launch a Chrome instance or connect to an existing one when needed. You can verify functionality by issuing a prompt like: Check the performance of https://developers.chrome.com. The MCP client should open Chrome, run a performance trace, and return an analysis.

How to install

Prerequisites you need before installing: Node.js (v20.19 or newer LTS), a current stable Chrome browser, and npm. You will run the MCP server using a local process.

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

Install the server locally by running the command shown above inside your MCP client configuration. Then start the MCP client to load the server. You can verify the setup by issuing the sample prompt to check performance.

Configuration and usage notes

The server supports a set of configuration options you pass via the args array when you start the server. You can customize how Chrome starts, where it looks for executables, and runtime behavior. For example, you can enable a Canary channel, run headless, or use an isolated user data directory. Pass these options through the MCP client configuration as shown in the example.

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

Connecting to a running Chrome instance

If you already have a Chrome instance running with remote debugging enabled, you can connect to it by providing the browser URL in your MCP client configuration. The common default is http://127.0.0.1:9222. When you connect to a running instance, Chrome DevTools MCP uses that session for actions and traces.

Security and privacy notes

The MCP server exposes contents of the browser to MCP clients, including data visible in DevTools. Do not share sensitive or personal information you don’t want exposed to MCP clients.

Known limitations

If you use sandboxing in your MCP client, Chrome might not start due to permissions. As a workaround, disable sandboxing for the MCP server or connect to a Chrome instance started outside the MCP client sandbox using the --browser-url approach.

Troubleshooting

If you run into issues, check the troubleshooting guide for common problems and steps to resolve them. Ensure the correct versions of Node.js and Chrome are in use and that the MCP server process can start Chrome as needed.

Available tools

Input automation

Click, drag, fill, fill_form, handle_dialog, hover, and upload_file to interact with page elements.

Navigation automation

Close, list, navigate, navigate history, open new pages, select pages, and wait for conditions to control browser flow.

Emulation

Emulate CPU and network conditions and resize the page to test behavior under different environments.

Performance

Start and stop performance traces and analyze actionable insights from Chrome DevTools traces.

Network

Query and list network requests to inspect how the page loads resources.

Debugging

Evaluate scripts, inspect console output, take screenshots, and capture page snapshots for debugging.