Chrome DevTools MCP

Chrome DevTools for coding agents

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

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

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

Chrome DevTools MCP

chrome-devtools-mcp lets your coding agent (such as Gemini, 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.

Tool reference | Changelog | Contributing | Troubleshooting

Key features

Get performance insights: Uses Chrome DevTools to record traces and extract actionable performance insights.
Advanced browser debugging: Analyze network requests, take screenshots and check the browser console.
Reliable automation. Uses puppeteer to automate actions in Chrome and automatically wait for action results.

Disclaimers

chrome-devtools-mcp exposes content of the browser instance to the MCP clients allowing them to inspect, debug, and modify any data in the browser or DevTools. Avoid sharing sensitive or personal information that you don't want to share with MCP clients.

Requirements

Node.js v20.19 or a newer latest maintenance LTS version.
Chrome current stable version or newer.
npm.

Getting started

Add the following config to your MCP client:

config.json

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

[!NOTE]
Using chrome-devtools-mcp@latest ensures that your MCP client will always use the latest version of the Chrome DevTools MCP server.

MCP Client configuration

Amp

Follow https://ampcode.com/manual#mcp and use the config provided above. You can also install the Chrome DevTools MCP server using the CLI:

bash

amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Antigravity

To use the Chrome DevTools MCP server follow the instructions from Antigravity's docs to install a custom MCP server. Add the following config to the MCP servers config:

JSON Config

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

This will make the Chrome DevTools MCP server automatically connect to the browser that Antigravity is using. If you are not using port 9222, make sure to adjust accordingly.

Claude Code

Use the Claude Code CLI to add the Chrome DevTools MCP server (guide):

Terminal

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Cline

Follow https://docs.cline.bot/mcp/configuring-mcp-servers and use the config provided above.

Codex

Follow the configure MCP guide using the standard config from above. You can also install the Chrome DevTools MCP server using the Codex CLI:

bash

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

On Windows 11

Configure the Chrome install location and increase the startup timeout by updating .codex/config.toml and adding the following env and startup_timeout_ms parameters:

Code

[mcp_servers.chrome-devtools]
command = "cmd"
args = [
    "/c",
    "npx",
    "-y",
    "chrome-devtools-mcp@latest",
]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

Copilot CLI

Start Copilot CLI:

Code

copilot

Start the dialog to add a new MCP server by running:

Code

/mcp add

Configure the following fields and press CTRL+S to save the configuration:

Server name: chrome-devtools
Server Type: [1] Local
Command: npx -y chrome-devtools-mcp@latest

Copilot / VS Code

Follow the MCP install guide, with the standard config from above. You can also install the Chrome DevTools MCP server using the VS Code CLI:

bash

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

Cursor

Click the button to install:

Or install manually:

Go to Cursor Settings -> MCP -> New MCP Server. Use the config provided above.

Factory CLI

Use the Factory CLI to add the Chrome DevTools MCP server (guide):

bash

droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest"

Gemini CLI

Install the Chrome DevTools MCP server using the Gemini CLI.

Project wide:

bash

gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

Globally:

bash

gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

Alternatively, follow the MCP guide and use the standard config from above.

Gemini Code Assist

Follow the configure MCP guide using the standard config from above.

JetBrains AI Assistant & Junie

Kiro

In Kiro Settings, go to Configure MCP > Open Workspace or User MCP Config > Use the configuration snippet provided above.

Or, from the IDE Activity Bar > Kiro > MCP Servers > Click Open MCP Config. Use the configuration snippet provided above.

Qoder

In Qoder Settings, go to MCP Server > + Add > Use the configuration snippet provided above.

Alternatively, follow the MCP guide and use the standard config from above.

Visual Studio

Click the button to install:

Warp

Go to Settings | AI | Manage MCP Servers -> + Add to add an MCP Server. Use the config provided above.

Windsurf

Follow the configure MCP guide using the standard config from above.

Your first prompt

Enter the following prompt in your MCP Client to check if everything is working:

Code

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

Your MCP client should open the browser and record a performance trace.

[!NOTE]
The MCP server will start the browser automatically once the MCP client uses a tool that requires a running browser instance. Connecting to the Chrome DevTools MCP server on its own will not automatically start the browser.

Tools

If you run into any issues, checkout our troubleshooting guide.

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Chrome DevTools MCP

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "chrome-devtools-mcp": { "command": "npx", "args": ["-y", "Chrome DevTools MCP"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Chrome DevTools MCP AllMCPs Directory Badge

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/chrome-devtools-mcp-3?style=directory)](https://allmcps.com/mcp/chrome-devtools-mcp-3)

HTML Embed

<a href="https://allmcps.com/mcp/chrome-devtools-mcp-3"><img src="https://allmcps.com/api/badge/chrome-devtools-mcp-3?style=directory" alt="Chrome DevTools MCP on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

32Quality signal: Emerging · 32/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools13/30

Adoption & activity1/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

★ Featured

AllMCPs Server

The official MCP server for AllMCPs.com - submit and manage tools directly from your AI. The open directory for MCP servers. Connect Claude, Cursor, Windsurf, and AI agents to databases, tools, files, and APIs. Explore 10,000+ servers. AllMCPs is the premier, open directory for discovering, evaluating, and installing Model Context Protocol (MCP) servers to equip AI agents and LLMs with real-world superpowers.

Explore Server →

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to Chrome DevTools MCP →Install in Claude Desktop Install in Cursor Install in VS Code

Documentation Overview

Chrome DevTools MCP

Tool reference | Changelog | Contributing | Troubleshooting

Key features

Get performance insights: Uses Chrome DevTools to record traces and extract actionable performance insights.
Advanced browser debugging: Analyze network requests, take screenshots and check the browser console.
Reliable automation. Uses puppeteer to automate actions in Chrome and automatically wait for action results.

Disclaimers

Requirements

Node.js v20.19 or a newer latest maintenance LTS version.
Chrome current stable version or newer.
npm.

Getting started

Add the following config to your MCP client:

config.json

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

[!NOTE]
Using chrome-devtools-mcp@latest ensures that your MCP client will always use the latest version of the Chrome DevTools MCP server.

MCP Client configuration

Amp

Follow https://ampcode.com/manual#mcp and use the config provided above. You can also install the Chrome DevTools MCP server using the CLI:

bash

amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Antigravity

To use the Chrome DevTools MCP server follow the instructions from Antigravity's docs to install a custom MCP server. Add the following config to the MCP servers config:

JSON Config

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

This will make the Chrome DevTools MCP server automatically connect to the browser that Antigravity is using. If you are not using port 9222, make sure to adjust accordingly.

Claude Code

Use the Claude Code CLI to add the Chrome DevTools MCP server (guide):

Terminal

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Cline

Follow https://docs.cline.bot/mcp/configuring-mcp-servers and use the config provided above.

Codex

Follow the configure MCP guide using the standard config from above. You can also install the Chrome DevTools MCP server using the Codex CLI:

bash

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

On Windows 11

Configure the Chrome install location and increase the startup timeout by updating .codex/config.toml and adding the following env and startup_timeout_ms parameters:

Code

[mcp_servers.chrome-devtools]
command = "cmd"
args = [
    "/c",
    "npx",
    "-y",
    "chrome-devtools-mcp@latest",
]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

Copilot CLI

Start Copilot CLI:

Code

copilot

Start the dialog to add a new MCP server by running:

Code

/mcp add

Configure the following fields and press CTRL+S to save the configuration:

Server name: chrome-devtools
Server Type: [1] Local
Command: npx -y chrome-devtools-mcp@latest

Copilot / VS Code

Follow the MCP install guide, with the standard config from above. You can also install the Chrome DevTools MCP server using the VS Code CLI:

bash

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

Cursor

Click the button to install:

Or install manually:

Go to Cursor Settings -> MCP -> New MCP Server. Use the config provided above.

Factory CLI

Use the Factory CLI to add the Chrome DevTools MCP server (guide):

bash

droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest"

Gemini CLI

Install the Chrome DevTools MCP server using the Gemini CLI.

Project wide:

bash

gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

Globally:

bash

gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

Alternatively, follow the MCP guide and use the standard config from above.

Gemini Code Assist

Follow the configure MCP guide using the standard config from above.

JetBrains AI Assistant & Junie

Kiro

In Kiro Settings, go to Configure MCP > Open Workspace or User MCP Config > Use the configuration snippet provided above.

Or, from the IDE Activity Bar > Kiro > MCP Servers > Click Open MCP Config. Use the configuration snippet provided above.

Qoder

In Qoder Settings, go to MCP Server > + Add > Use the configuration snippet provided above.

Alternatively, follow the MCP guide and use the standard config from above.

Visual Studio

Click the button to install:

Warp

Go to Settings | AI | Manage MCP Servers -> + Add to add an MCP Server. Use the config provided above.

Windsurf

Follow the configure MCP guide using the standard config from above.

Your first prompt

Enter the following prompt in your MCP Client to check if everything is working:

Code

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

Your MCP client should open the browser and record a performance trace.

[!NOTE]
The MCP server will start the browser automatically once the MCP client uses a tool that requires a running browser instance. Connecting to the Chrome DevTools MCP server on its own will not automatically start the browser.

Tools

If you run into any issues, checkout our troubleshooting guide.

Frequently Asked Questions about Chrome DevTools MCP

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "chrome-devtools-mcp": { "command": "npx", "args": ["-y", "Chrome DevTools MCP"] } }