Chrome DevTools

You can control and inspect a live Chrome browser with this MCP server, unlocking automated debugging, performance analysis, and reliable browser actions for your AI coding assistants. It connects your agent to Chrome DevTools, letting you record traces, analyze network activity, take screenshots, and automate tasks with built-in waiting for action results.

How to use

Use this MCP server with your preferred MCP client to start a Chrome session and perform automated actions driven by your AI assistant. You can run performance traces, inspect network requests, capture screenshots, and evaluate console output. The server can either start its own Chrome instance or connect to an existing one, depending on how you configure it. Your prompts will drive browser actions such as navigation, clicking, filling forms, and more, with results returned to your client for interpretation.

How to install

Prerequisites you need before installation: Node.js v20.19 or newer (latest maintenance LTS recommended), Chrome current stable or newer, and npm.

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

Additional setup notes

To ensure you always use the latest server version, install with the latest tag in your MCP client using the provided configuration snippet. You can also install via various MCP clients using their dedicated commands. The server supports connecting to a running Chrome instance or starting Chrome itself, depending on your needs.

Configuration and operation details

The server exposes a range of configuration options to connect to Chrome and control how the browser is launched. You can specify the browser URL or a WebSocket endpoint, choose headless vs headed mode, set an executable path, and adjust timeouts and viewport size. You can also constrain or expand the feature set by enabling or disabling categories such as emulation, performance, and network.

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

First prompt to test your setup

Ask the MCP client to check a page’s performance to verify that the browser opens and a performance trace is recorded. For example, prompt your client to check the performance of a Chrome developer page.

Security and privacy notes

The MCP server exposes the browser contents to MCP clients. Be mindful of sharing sensitive or personal data through this channel. Use isolated user data directories when possible to avoid mixing with your regular browsing data.

Known limitations

If you use sandboxed MCP clients, Chrome’s ability to start its own browser process might be restricted. In such cases, prefer connecting to a separately started Chrome instance via a browser URL or WebSocket endpoint instead of starting a new one from within the sandbox.

Troubleshooting tips

If you encounter issues with VM-to-host port forwarding or remote debugging, check your environment’s networking settings and refer to Chrome DevTools remote debugging guidance for proper port exposure and security configurations.

Tools overview

The server provides tools for input automation (click, drag, fill, fill_form, handle_dialog, hover, press_key, upload_file), navigation automation (close_page, list_pages, navigate_page, new_page, select_page, wait_for), emulation (emulate, resize_page), performance (performance_analyze_insight, performance_start_trace, performance_stop_trace), network (get_network_request, list_network_requests), and debugging (evaluate_script, get_console_message, list_console_messages, take_screenshot, take_snapshot). Use these to drive your Chrome session and gather insights.

Connecting to a running Chrome instance

If you want to connect to an existing Chrome instance, configure the client to pass a browser URL or a WebSocket endpoint. This allows you to use your current Chrome profile or a browser started outside the MCP client. The browser can be started with a remote debugging port and a separate user data directory for safety.

Environment and language hints

Code examples and commands are provided in JavaScript/JSON style. The server configuration uses Node.js tooling, typically with npm and npx. The primary language for integrating and scripting is JavaScript.

Available tools

click

Simulate a mouse click at a specified element or coordinate within the page.

drag

Drag an element from a start point to an end point to simulate user drag-and-drop interactions.

fill

Enter text into a focused input field or element.

fill_form

Populate all fields in a form according to provided values.

handle_dialog

Interact with modal dialogs, alerts, or prompts by accepting, dismissing, or providing input.

hover

Move the cursor over a target element to trigger hover states.

press_key

Simulate keyboard key presses or shortcuts.

upload_file

Attach a file to a file input control in a form.

close_page

Close the current browser tab or page.

list_pages

Enumerate all open pages or tabs in the current browser context.

navigate_page

Navigate to a specified URL within the current tab.

new_page

Open a new browser tab or window.

select_page

Switch focus to a different open page.

wait_for

Wait for a specific condition or event to occur in the page.

emulate

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

resize_page

Change the viewport size to emulate different screen dimensions.

performance_analyze_insight

Analyze collected performance traces to extract actionable insights.

performance_start_trace

Begin recording a performance trace for the current page.

performance_stop_trace

Stop recording and save the collected performance trace.

get_network_request

Retrieve details about a specific network request.

list_network_requests

List all network requests captured during the session.

evaluate_script

Run JavaScript in the page context and return the result.

get_console_message

Fetch messages logged to the browser console.

list_console_messages

List all console messages collected during the session.

take_screenshot

Capture a screenshot of the current page.

take_snapshot

Capture a DOM snapshot of the current page state.