Chrome DevTools MCP server

The Chrome DevTools MCP server allows your AI assistant to control and inspect a Chrome browser, providing powerful automation, debugging, and performance analysis capabilities through the Model-Context-Protocol (MCP).

Installation

To use the Chrome DevTools MCP server with your AI assistant, add the following configuration to your MCP client:

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

Requirements

• Node.js v20.19 or newer LTS version
• Chrome (current stable version or newer)
• npm

Testing Your Installation

After configuring your MCP client, test your setup with this prompt:

Check the performance of https://developers.chrome.com

The server will automatically start a Chrome browser instance when needed and record a performance trace.

Key Features

• Performance Analysis: Record traces and extract actionable performance insights
• Browser Debugging: Analyze network requests, take screenshots, check console messages
• Reliable Automation: Automate browser actions with automatic waiting for results

Configuration Options

You can customize the Chrome DevTools MCP server behavior with various options:

Basic Configuration

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

Common Options

• --headless: Run Chrome in headless (no UI) mode
• --isolated: Use a temporary user-data-dir that's cleaned up after the browser closes
• --channel: Specify Chrome channel to use (stable, canary, beta, dev)
• --viewport: Set initial viewport size (e.g., 1280x720)
• --executablePath: Path to custom Chrome executable

Connecting to an Existing Chrome Instance

Automatic Connection (Chrome 144+)

1. Enable remote debugging in Chrome by navigating to chrome://inspect/#remote-debugging
2. Configure the MCP server with:

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

Manual Connection via Port Forwarding

1. Start Chrome with remote debugging enabled:

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Linux

/usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Windows

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"

2. Configure the MCP server with:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

Available Tools

Input Automation

• click: Click on page elements
• fill: Enter text into form fields
• fill_form: Complete multiple form fields at once
• hover: Hover over elements
• press_key: Simulate keyboard input
• upload_file: Upload files to the page

Navigation

• navigate_page: Go to a URL
• new_page: Open a new browser tab
• select_page: Switch between open tabs
• close_page: Close a browser tab
• list_pages: Show all open tabs
• wait_for: Wait for specific page conditions

Debugging

• evaluate_script: Run JavaScript in the page
• take_screenshot: Capture the page visually
• take_snapshot: Get the DOM snapshot
• list_console_messages: View browser console messages
• get_console_message: Get details of specific console messages

Performance

• performance_start_trace: Begin performance recording
• performance_stop_trace: End performance recording
• performance_analyze_insight: Analyze performance data

Network

• list_network_requests: View all network activity
• get_network_request: Get details of specific network requests

Emulation

• emulate: Simulate different devices or conditions
• resize_page: Change the browser viewport size

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

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

See the official Claude Code MCP documentation for more details.

For Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

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

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

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

3. Restart Claude Desktop for the changes to take effect