Chrome DevTools MCP

Official Recommended

by chromedevtools

7.9M downloads Not rated yet

GitHub Website

About

Official Chrome DevTools MCP server for controlling and inspecting a live Chrome browser from coding agents such as Gemini, Claude, Cursor, and Copilot.

Explore

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name Chrome DevTools MCP

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

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

JSON

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

JSON

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

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

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

JSON

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

JSON

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

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

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

McpServers

{
    "server": {
        "command": "npx",
        "args": [
            "-y",
            "chrome-devtools-mcp"
        ]
    }
}

Transport

"stdio"

Package

"chrome-devtools-mcp"

Registry

"npm"

What can you do with Chrome DevTools MCP?

- Performance tracing— Ask your assistant to record a trace withperformance_start_traceand analyze insights like Core Web Vitals for any page.
- Network debugging— Uselist_network_requestsandget_network_requestto inspect failed requests, status codes, and response details.
- Console monitoring— Checklist_console_messagesfor errors and warnings with source-mapped stack traces to debug issues.
- Page automation— Direct your assistant tonavigate_page,click,fill_form, ortake_screenshotto interact with and capture live pages.
- Memory analysis— Enable memory debugging to take and compare heap snapshots, query objects, and trace retaining paths for leaks.
- Lighthouse audits— Runlighthouse_auditto get performance, accessibility, and SEO scores for a URL.

Chrome DevTools for agents (chrome-devtools-mcp) lets your coding agent (such as Antigravity, Claude, Cursor or Copilot) control and inspect a live Chrome browser. It acts as a Model-Context-Protocol (MCP) server, giving your AI coding assistant access to the full power of Chrome DevTools for reliable automation, in-depth debugging, and performance analysis. A[CLIis also provided for use without MCP.

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Explore

Setting up with Highlight

Claude Desktop / Cursor

McpServers

Transport

Package

Registry

What can you do with Chrome DevTools MCP?

More like this

@mendableai/firecrawl Mcp Server

Playwright

Sequential Thinking

Sentry