README.md

Chrome DevTools MCP

chrome-devtools-mcp is a server that enables Model-Context-Protocol (MCP) clients to automate Chrome for debugging purposes. This is an early experimental prototype!

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 do 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-mcp": {
      "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 specific configuration

Cursor

Follow https://docs.cursor.com/en/context/mcp#using-mcp-json and use the config provided above.

Claude Code

Use the Claude Code CLI to add the Chrome DevTools MCP server ([guide](https://docs.anthropic.com/en/docs/claude-code/mcp)):

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

Cline

Follow https://docs.cline.bot/mcp/configuring-mcp-servers and use the config provided above.

Copilot / VS Code

Follow the MCP install [guide](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server), with the standard config from above. You can also install the Chrome DevTools MCP server using the VS Code CLI:

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

Gemini CLI

Follow the [MCP guide](https://github.com/google-gemini/gemini-cli/blob/main/docs/tools/mcp-server.md#how-to-set-up-your-mcp-server) using the standard config from above.

Gemini Code Assist

Follow the [configure MCP guide](https://cloud.google.com/gemini/docs/codeassist/use-agentic-chat-pair-programmer#configure-mcp-servers) using the standard config from above.

Tools

• Input automation (7 tools)
  • click
  • drag
  • fill
  • fill_form
  • handle_dialog
  • hover
  • upload_file
• Navigation automation (7 tools)
  • close_page
  • list_pages
  • navigate_page
  • navigate_page_history
  • new_page
  • select_page
  • wait_for
• Emulation (3 tools)
  • emulate_cpu
  • emulate_network
  • resize_page
• Performance (2 tools)
  • performance_start_trace
  • performance_stop_trace
• Network (2 tools)
  • get_network_request
  • list_network_requests
• Debugging (4 tools)
  • evaluate_script
  • list_console_messages
  • take_screenshot
  • take_snapshot

Configuration

For example, to launch the system-installed Chrome Canary pass --channel=canary as an argument:

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

User data directory

chrome-devtools-mcp starts a Chrome's stable channel instance using the user data directory at $HOME/.cache/chrome-devtools-mcp/mcp-profile-$CHANNEL on Linux/MacOS and %HOMEPATH%/.cache/chrome-devtools-mcp/mcp-profile-$CHANNEL in Windows. The user data directory is not cleared between runs and shared across all instances of chrome-devtools-mcp.

CLI

Run npx chrome-devtools-mcp@latest --help to see all available configuration options:

Options:
      --version         Show version number  [boolean]
  -u, --browserUrl      The browser URL to connect to  [string]
      --headless        Whether to run in headless (no UI) mode  [boolean] [default: false]
  -e, --executablePath  Path to custom Chrome executable  [string]
      --isolated        If specified, creates a temporary user-data-dir that is automatically cleaned up after the browser is closed.  [boolean] [default: false]
      --channel         System installed browser channel to use.  [string] [choices: "stable", "canary", "beta", "dev"]
      --help            Show help  [boolean]

Examples:
  npx chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222  Connect to an existing browser instance
  npx chrome-devtools-mcp@latest --channel beta                      Use Chrome Beta installed on this system
  npx chrome-devtools-mcp@latest --channel canary                    Use Chrome Canary installed on this system
  npx chrome-devtools-mcp@latest --channel dev                       Use Chrome Dev installed on this system
  npx chrome-devtools-mcp@latest --channel stable                    Use stable Chrome installed on this system
  npx chrome-devtools-mcp@latest --logFile /tmp/log.txt              Save logs to a file
  npx chrome-devtools-mcp@latest --help                              Print CLI options