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.

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 22.12.0 or newer.
• Chrome current stable version or newer.
• npm.

Getting started

Add the following config to your MCP client:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["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

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

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

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

Click the button to install:

Or install manually:

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

Your first prompt

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

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

• Input automation (7 tools)
  • click
  • drag
  • fill
  • fill_form
  • handle_dialog
  • hover
  • upload_file
• Navigation automation (7 tools)
  • close_page
  • list_pages
  • navigate_page
  • navigate_page_history
  • new_page
  • select_page
  • wait_for
• Emulation (3 tools)
  • emulate_cpu
  • emulate_network
  • resize_page
• Performance (3 tools)
  • performance_analyze_insight
  • performance_start_trace
  • performance_stop_trace
• Network (2 tools)
  • get_network_request
  • list_network_requests
• Debugging (4 tools)
  • evaluate_script
  • list_console_messages
  • take_screenshot
  • take_snapshot

Configuration

The Chrome DevTools MCP server supports the following configuration option:

• --browserUrl, -u Connect to a running Chrome instance using port forwarding. For more details see: https://developer.chrome.com/docs/devtools/remote-debugging/local-server.

  • Type: string

• --headless Whether to run in headless (no UI) mode.

  • Type: boolean
  • Default: false

• --executablePath, -e Path to custom Chrome executable.

  • Type: string

• --isolated If specified, creates a temporary user-data-dir that is automatically cleaned up after the browser is closed.

  • Type: boolean
  • Default: false

• --channel Specify a different Chrome channel that should be used. The default is the stable channel version.

  • Type: string
  • Choices: stable, canary, beta, dev

Pass them via the args property in the JSON configuration. For example:

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

You can also run npx chrome-devtools-mcp@latest --help to see all available configuration options.

Concepts

User data directory

chrome-devtools-mcp starts a Chrome's stable channel instance using the following user data directory:

• Linux / MacOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
• Window: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

The user data directory is not cleared between runs and shared across all instances of chrome-devtools-mcp. Set the isolated option to true to use a temporary user data dir instead which will be cleared automatically after the browser is closed.

Known limitations

Operating system sandboxes

Some MCP clients allow sandboxing the MCP server using macOS Seatbelt or Linux containers. If sandboxes are enabled, chrome-devtools-mcp is not able to start Chrome that requires permissions to create its own sandboxes. As a workaround, either disable sandboxing for chrome-devtools-mcp in your MCP client or use --connect-url to connect to a Chrome instance that you start manually outside of the MCP client sandbox.

Server Configuration

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

Source

• ModelScope: ModelScope MCP
• Project: https://github.com/ChromeDevTools/chrome-devtools-mcp

Chrome DevTools MCP

chrome-devtools-mcp 使您的编码代理（如 Gemini、Claude、Cursor 或 Copilot）能够控制和检查实时的 Chrome 浏览器。它充当 Model-Context-Protocol (MCP) 服务器，让您的 AI 编码助手能够访问 Chrome DevTools 的全部功能，以实现可靠的自动化、深入调试和性能分析。

主要特性

• 获取性能洞察：使用 Chrome DevTools 记录跟踪并提取可操作的性能洞察。
• 高级浏览器调试：分析网络请求、截屏并检查浏览器控制台。
• 可靠的自动化。使用 puppeteer 在 Chrome 中自动执行操作，并自动等待操作结果。

免责声明

chrome-devtools-mcp 将浏览器实例的内容暴露给 MCP 客户端，允许它们检查、调试和修改浏览器或 DevTools 中的任何数据。避免共享您不想与 MCP 客户端共享的敏感或个人信息。

要求

• Node.js 22.12.0 或更新版本。
• Chrome 当前稳定版本或更新版本。
• npm。

开始使用

将以下配置添加到您的 MCP 客户端中：

{

  "mcpServers": {

    "chrome-devtools": {

      "command": "npx",

      "args": ["chrome-devtools-mcp@latest"]

    }

  }

}

[!NOTE]
使用 chrome-devtools-mcp@latest 确保您的 MCP 客户端始终使用最新版本的 Chrome DevTools MCP 服务器。

MCP 客户端配置

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

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

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

点击按钮安装：

或者手动安装：

转到 Cursor 设置 -> MCP -> 新建 MCP 服务器。使用上面提供的配置。

您的第一个提示

在您的 MCP 客户端中输入以下提示，以检查一切是否正常工作：

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

您的 MCP 客户端应打开浏览器并记录性能跟踪。

[!NOTE]
MCP 服务器将在 MCP 客户端使用需要运行浏览器实例的工具时自动启动浏览器。仅连接到 Chrome DevTools MCP 服务器本身不会自动启动浏览器。

工具

• 输入自动化（7 个工具）
  • click
  • drag- fill
  • fill_form
  • handle_dialog
  • hover
  • upload_file
• 导航自动化 (7 个工具)
  • close_page
  • list_pages
  • navigate_page
  • navigate_page_history
  • new_page
  • select_page
  • wait_for
• 模拟 (3 个工具)
  • emulate_cpu
  • emulate_network
  • resize_page
• 性能 (3 个工具)
  • performance_analyze_insight
  • performance_start_trace
  • performance_stop_trace
• 网络 (2 个工具)
  • get_network_request
  • list_network_requests
• 调试 (4 个工具)
  • evaluate_script
  • list_console_messages
  • take_screenshot
  • take_snapshot

配置

Chrome DevTools MCP 服务器支持以下配置选项：

• --browserUrl, -u 使用端口转发连接到正在运行的 Chrome 实例。更多详情请参见：https://developer.chrome.com/docs/devtools/remote-debugging/local-server。

  • 类型: 字符串

• --headless 是否以无头（无 UI）模式运行。

  • 类型: 布尔值
  • 默认值: false

• --executablePath, -e 自定义 Chrome 可执行文件的路径。

  • 类型: 字符串

• --isolated 如果指定，则创建一个在浏览器关闭后自动清理的临时用户数据目录。

  • 类型: 布尔值
  • 默认值: false

• --channel 指定应使用的不同 Chrome 通道。默认是稳定版通道版本。

  • 类型: 字符串
  • 选项: stable, canary, beta, dev

通过 JSON 配置中的 args 属性传递这些选项。例如：

{

  "mcpServers": {

    "chrome-devtools": {

      "command": "npx",

      "args": [

        "chrome-devtools-mcp@latest",

        "--channel=canary",

        "--headless=true",

        "--isolated=true"

      ]

    }

  }

}

您还可以运行 npx chrome-devtools-mcp@latest --help 来查看所有可用的配置选项。

概念

用户数据目录

chrome-devtools-mcp 使用以下用户数据目录启动 Chrome 的稳定版实例：

• Linux / MacOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
• Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

用户数据目录在多次运行之间不会被清除，并且在所有 chrome-devtools-mcp 实例之间共享。将 isolated 选项设置为 true 以使用一个临时用户数据目录，该目录将在浏览器关闭后自动清除。

已知限制

操作系统沙箱

某些 MCP 客户端允许使用 macOS Seatbelt 或 Linux 容器对 MCP 服务器进行沙箱化。如果启用了沙箱，chrome-devtools-mcp 将无法启动需要权限来创建自己沙箱的 Chrome。作为解决方法，您可以在您的 MCP 客户端中禁用 chrome-devtools-mcp 的沙箱，或者使用 --connect-url 连接到您手动在 MCP 客户端沙箱之外启动的 Chrome 实例。