home / mcp / chrome devtools mcp server

Chrome DevTools MCP Server

MCP server for Chrome DevTools

Installation

Add the following to your MCP client configuration file.

Configuration

{
  "mcpServers": {
    "ctrlshiftbryan-chrome-devtools-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest"
      ],
      "env": {
        "SystemRoot": "C:\\\\Windows",
        "PROGRAMFILES": "C:\\\\Program Files"
      }
    }
  }
}

You can connect to a Chrome browser from your MCP client to automate actions, inspect DevTools, capture performance traces, and debug with full browser context. This MCP server lets your AI coding assistant run Chrome, record traces, analyze network activity, and take screenshots, all through a safe, configurable bridge between your client and a local Chrome instance or a running one.

How to use

With the Chrome DevTools MCP server, you drive a live Chrome instance from your MCP client. Start the server locally or connect to an already running Chrome via a WebSocket or browser URL. You can perform automated actions, navigate pages, inspect network requests, and gather performance data. Use it to automate debugging sessions, reproduce issues, or collect traces for performance analysis.

How to install

Prerequisites: Node.js v20.19 or newer (latest maintenance LTS preferred) and npm. Ensure you have Chrome current stable or newer installed.

# Quick install via npm/npx (works in most environments)
npx -y chrome-devtools-mcp@latest
```

```
# Or install via a package manager script if you prefer a more explicit flow
npm install -g chrome-devtools-mcp@latest

Configuration and running tips

You configure the MCP client to connect to the Chrome DevTools MCP server using a standard local (stdio) setup. The simplest form uses npx to run the server and connect directly from your MCP client.

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

If you are on Windows 11 and need a Windows-specific startup configuration, you can use a local command that runs via cmd with explicit environment settings:

```
[mcp_servers.chrome-devtools]
command = "cmd"
args = [
  "/c",
  "npx",
  "-y",
  "chrome-devtools-mcp@latest",
]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
ststartup_timeout_ms = 20_000

Security and data handling

The Chrome DevTools MCP server exposes browser content to MCP clients for inspection, debugging, and modification. Do not share sensitive or personal information through MCP clients unless you are certain you control both ends and understand the data exposure.

Connecting to a running Chrome instance

You can connect to an existing Chrome instance by configuring your MCP client to point at the running browser through a browser URL or a WebSocket endpoint. When you start the browser with remote debugging enabled, the MCP server can attach to that session and operate within that profile.

If you prefer to connect via a WebSocket endpoint, pass the endpoint URL and optional headers in the MCP client configuration. This is useful when your Chrome instance runs in a separate process or in a restricted environment.

Available tools

click

Automate mouse click actions within the browser to interact with page elements.

drag

Drag an element from one coordinate to another to simulate user interactions.

fill

Fill a single form field with the specified value.

fill_form

Fill multiple fields in a form according to a provided mapping.

handle_dialog

Interact with modal or alert dialogs that appear in the page.

hover

Move the cursor over an element to trigger hover states.

press_key

Simulate keyboard input for a targeted element or region.

upload_file

Upload a file to a file input control.

close_page

Close the current page or tab in the browser.

list_pages

Retrieve a list of open and background pages.

navigate_page

Navigate the current page to a new URL.

new_page

Open a new browser page or tab.

select_page

Choose a specific page to interact with from available pages.

wait_for

Pause until a condition or event occurs in the browser.

emulate_cpu

Emulate different CPU conditions for performance testing.

emulate_network

Simulate network conditions to analyze performance under varied speeds.

resize_page

Change the viewport size to test responsive layouts.

performance_analyze_insight

Analyze performance data to extract actionable insights.

performance_start_trace

Begin recording a performance trace for later analysis.

performance_stop_trace

Stop the ongoing performance trace and export results.

get_network_request

Retrieve details for a specific network request.

list_network_requests

List all network requests captured during a session.

evaluate_script

Run arbitrary scripts in the page context and return results.

get_console_message

Fetch messages logged to the browser console.

list_console_messages

List all console messages captured during a session.

take_screenshot

Capture a screenshot of the current page state.

take_snapshot

Capture a DOM snapshot or visual state for debugging.