home / mcp / chrome devtools mcp server

Chrome DevTools MCP Server

Provides a MCP server that lets AI agents control and inspect a live Chrome browser for automation, debugging, and performance analysis.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

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

You can use the Chrome DevTools MCP server to let your AI coding assistant control and inspect a live Chrome browser, enabling reliable automation, in-depth debugging, and performance analysis through the MCP (Model-Context-Protocol).

How to use

You will connect your MCP client to the Chrome DevTools MCP server as a local, self-contained process. Once connected, you can issue actions to drive Chrome, record performance traces, inspect network activity, capture screenshots, and read console messages. Start by configuring your MCP client to reference the Chrome DevTools MCP server, then prompt the agent to perform tasks like loading pages, interacting with elements, and collecting performance insights. The server will launch or connect to a Chrome instance and execute your commands, returning results and traces for you to analyze.

How to install

Prerequisites: you need Node.js (recommended v20.19 or newer LTS), Chrome (current stable or newer), and npm installed on your system.

Install the Chrome DevTools MCP server by adding it to your MCP client configuration or by running it directly with a package manager. Use the following runtime command as shown in examples to start the server from your MCP client.

Example installation command for running the MCP server locally via npx:

Configuration and usage notes

The server supports multiple configuration options. You can control how Chrome is launched, connect to an existing running Chrome, set viewport size, enable headless mode, and pass additional Chrome arguments. You can also specify a WebSocket endpoint and headers if you connect to a running browser, or start a new Chrome instance for automation.

To run the server locally, include the following MCP client configuration snippet. This config uses npx to fetch the latest Chrome DevTools MCP server image and run it.

Your first prompt

To verify everything is working, prompt your MCP client with a simple test that checks the performance of a web page. The MCP client will open Chrome, run a performance trace, and return results that you can review.

Security considerations

The Chrome DevTools MCP server exposes browser content to MCP clients. Avoid sharing sensitive or personal information that you do not want to access from MCP clients, and exercise caution when connecting to remote or shared environments.

Troubleshooting and tips

If you encounter issues starting or connecting to Chrome, check that your browser version is compatible, verify port usage for any remote debugging configurations, and review any logs produced by the MCP server. If you run into VM-to-host port forwarding problems, refer to the relevant troubleshooting guidance for remote debugging scenarios.

Available tools

click

Simulate a mouse click on a target element or coordinate within the page.

drag

Drag a pointer from a starting point to an end point, useful for sliders and drag-and-drop interactions.

fill

Type text into an input field or contenteditable element.

fill_form

Fill multiple fields in a form in a single action and optionally submit.

handle_dialog

Interact with native browser dialogs such as alerts, confirms, and prompts.

hover

Move the cursor over an element to trigger hover states or tooltips.

press_key

Simulate a keyboard key press, including modifier keys.

upload_file

Upload a file to a file input control.

close_page

Close the current browser page or tab.

list_pages

Retrieve the list of open pages or tabs.

navigate_page

Navigate to a specified URL within the browser.

new_page

Open a new browser page or tab.

select_page

Switch focus to a specific open page or tab.

wait_for

Wait for a condition to be met or for a page event to occur before proceeding.

emulate

Emulate different devices or viewport characteristics.

resize_page

Change the viewport size or device scale for the current page.

performance_analyze_insight

Analyze collected performance data to extract actionable insights.

performance_start_trace

Begin recording a performance trace for the current page.

performance_stop_trace

End the current performance trace and save the results.

get_network_request

Fetch details for a specific network request.

list_network_requests

List all network requests captured during a session.

evaluate_script

Run JavaScript in the page context and return the result.

get_console_message

Retrieve messages from the browser console.

list_console_messages

List all console messages captured during the session.

take_screenshot

Capture a screenshot of the current page.

take_snapshot

Capture a DOM snapshot or a page state representation.