Home / MCP / Chrome DevTools MCP Server

Chrome DevTools MCP Server

Provides programmatic access to Chrome DevTools for automation, debugging, tracing, and performance analysis via MCP.

javascript

16.1kstars

View on GitHub

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
    "mcpServers": {
        "chrome_devtools_http": {
            "url": "https://mcp.example.com/mcp"
        }
    }
}

You can use the Chrome DevTools MCP server to control and inspect a live Chrome browser from your MCP client. This connection enables automated browser actions, performance tracing, debugging, and network/console analysis through a consistent Model-Context-Protocol interface.

How to use

With the Chrome DevTools MCP server running, you connect from your MCP client and issue prompts that perform actions in Chrome, collect traces, and extract insights. You can start automated tasks, navigate pages, interact with elements, capture screenshots, inspect network activity, and analyze performance traces. If you request a performance check for a site, you’ll see a recorded trace and actionable results that help you optimize load times, scripting, and rendering.

How to install

Prerequisites you need before installing:
- Node.js v20.19 or newer (latest maintenance LTS recommended)
- npm
- A Chrome browser (current stable or newer) that you will connect to either by starting a new browser instance or by pointing to an existing one.

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

Additional configuration options you will use

You can connect to a running Chrome instance by providing the browser URL to the MCP client configuration. This lets you use an existing Chrome profile or run the MCP server in an environment that cannot start a new browser process directly.

If you want the MCP server to connect to a specific running Chrome, set --browser-url to the address of the running instance (for example, http://127.0.0.1:9222). You can also connect via a WebSocket endpoint with optional headers using --wsEndpoint and --wsHeaders.

When starting Chrome for remote debugging, include a dedicated user data directory to avoid exposing your regular browsing data.

Connecting to a running Chrome instance step by step

1) Configure your MCP client to pass the browser URL of the running Chrome instance, for example: "--browser-url=http://127.0.0.1:9222".

2) Start Chrome with remote debugging enabled using a separate user data directory. For example, on macOS, run: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable.

3) In your MCP client, issue a prompt like: Check the performance of https://developers.chrome.com. The MCP client will connect to the running Chrome instance, perform a trace, and return a performance report.

Security note

The Chrome DevTools MCP server exposes the content of the browser to MCP clients. Do not share sensitive or personal data you don’t want exposed to those clients.

Troubleshooting

If you encounter issues, check the troubleshooting guide for common problems with MCP connections, browser connectivity, and trace collection.

Available tools

click

Simulate a mouse click on a page element and wait for the action to complete.

drag

Drag an element from one location to another, with the system waiting for the drop to finish.

fill

Type text into an input element and wait for the field to reflect the value.

fill_form

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

handle_dialog

Interact with modal dialogs or browser prompts and confirm actions.

hover

Move the cursor over an element to reveal hover-based UI changes.

press_key

Simulate keyboard input for a specific key or combination.

upload_file

Upload a file to a file input control.

wait_for

Wait for a given condition or selector to appear before proceeding.

close_page

Close the current tab or page.

list_pages

Retrieve a list of currently open pages/tabs.

navigate_page

Navigate to a specified URL within the current page.

new_page

Open a new browser tab or window.

select_page

Switch focus to a specific page from the open pages list.

resize_page

Change the viewport size to simulate different device dimensions.

emulate

Emulate device characteristics such as user agent, viewport, or network conditions.

performance_analyze_insight

Analyze a performance trace and extract actionable insights.

performance_start_trace

Begin recording a performance trace for later analysis.

performance_stop_trace

Stop a running performance trace and save the results.

get_network_request

Retrieve details about a single network request.

list_network_requests

List all network requests captured during a trace.

evaluate_script

Execute a JavaScript snippet in the page context and return the result.

get_console_message

Fetch messages from the browser console.

list_console_messages

List all console messages captured during a session.

take_screenshot

Capture a screenshot of the current page.

take_snapshot

Capture a DOM or page state snapshot for debugging.