Chrome MCP Devtool

Chrome开发工具MCP

](https://npmjs.org/package/chrome-devtools-mcp)

chrome-devtools-mcp 让你的编码代理（如Gemini、Claude、Cursor或Copilot） 控制和检查实时Chrome浏览器。它充当模型上下文协议 （MCP）服务器，让您的AI编码助手能够充分利用 Chrome DevTools可实现可靠的自动化、深度调试和性能分析。

工具参考 | 更新日志 | 贡献 | 故障排除

主要特点

• 获取性能见解：用途 [铬

开发者工具](https://github.com/ChromeDevTools/devtools-frontend) 录制 跟踪并提取可操作的性能见解。

• 高级浏览器调试：分析网络请求，截图和

检查浏览器控制台。

• 可靠的自动化.用途

操纵者 使中的操作自动化 Chrome浏览器会自动等待操作结果。

免责声明

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

需求

• v20.19或更新版本 最新维护LTS 版本。
• 铬 当前稳定版本或更新版本。
• .

入门

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

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

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

MCP客户端配置

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:

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

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

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:

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

在Windows 11上

配置Chrome安装位置，并通过更新来增加启动超时时间 .codex/config.toml 并添加以下内容 env 和 startup_timeout_ms 参数：

[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

启动Copilot CLI：

copilot

通过运行以下命令启动对话框以添加新的MCP服务器：

/mcp add

配置以下字段，然后按 CTRL+S 要保存配置，请执行以下操作：

• 服务器名称： chrome-devtools
• 服务器类型： [1] Local
• 命令： 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:

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

Cursor

单击按钮安装：

[](https://cursor.com/en/install-mcp?name=chrome-devtools&config=eyJjb21tYW5kIjoibnB4IC15IGNocm9tZS1kZXZ0b29scy1tY3BAbGF0ZXN0In0%3D)

或手动安装：

首选 Cursor Settings -> MCP -> New MCP Server.使用上面提供的配置。

Gemini CLI Install the Chrome DevTools MCP server using the Gemini CLI.

项目范围：

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

全球地：

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

或者，遵循 MCP指南 并使用上面的标准配置。

Gemini Code Assist Follow the configure MCP guide using the standard config from above.

JetBrains AI Assistant & Junie

首选 Settings | Tools | AI Assistant | Model Context Protocol (MCP) -> Add.使用上面提供的配置。 与在JetBrains Junie中配置chrome devtools mcp的方式相同 Settings | Tools | Junie | MCP Settings -> Add.使用上面提供的配置。

Kiro

在 Kiro设置首选 Configure MCP > Open Workspace or User MCP Config >使用上面提供的配置代码段。

或者，从IDE 活动栏 > Kiro > MCP Servers > Click Open MCP Config。使用上面提供的配置代码段。

Qoder

在 Qoder设置首选 MCP Server > + Add >使用上面提供的配置代码段。

或者，遵循 MCP指南 并使用上面的标准配置。

Visual Studio

单击按钮安装：

Warp

首选 Settings | AI | Manage MCP Servers -> + Add 到 添加MCP服务器.使用上面提供的配置。

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

您的第一个提示

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

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

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

\[！注意\]\ 一旦MCP客户端使用需要运行浏览器实例的工具，MCP服务器将自动启动浏览器。单独连接到Chrome DevTools MCP服务器不会自动启动浏览器。

工具

如果您遇到任何问题，请查看我们的 故障排除指南.

• 输入自动化 （8工具）

- click - drag - fill - fill_form - handle_dialog - hover - press_key - upload_file

• 导航自动化 （6个工具）

- close_page - list_pages - navigate_page - new_page - select_page - wait_for

• 仿真 （2个工具）

- emulate - resize_page

• 演出 （3个工具）

- performance_analyze_insight - performance_start_trace - performance_stop_trace

• 网络 （2个工具）

- get_network_request - list_network_requests

• 调试 （5个工具）

- evaluate_script - get_console_message - list_console_messages - take_screenshot - take_snapshot

配置

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

• --browserUrl, -u

使用端口转发连接到正在运行的Chrome实例。有关更多详细信息，请参阅：https://developer.chrome.com/docs/devtools/remote-debugging/local-server.

- 类型： 字符串

• --wsEndpoint, -w

连接到正在运行的Chrome实例的WebSocket端点（例如ws://127.0.0.1:9222/devtools/browser/).替代--browserUrl。

- 类型： 字符串

• --wsHeaders

JSON格式的WebSocket连接的自定义标头（例如，“{“Authorization”：“Bearer token”}'）。仅适用于--wsEndpoint。

- 类型： 字符串

• --headless

是否在无头（无UI）模式下运行。

- 类型： 布尔 - 违约： false

• --executablePath, -e

自定义Chrome可执行文件的路径。

- 类型： 字符串

• --isolated

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

- 类型： 布尔 - 违约： false

• --channel

指定应使用的其他Chrome频道。默认是稳定频道版本。

- 类型： 字符串 - 选择： stable, canary, beta, dev

• --logFile

用于写入调试日志的文件的路径。设置env变量 DEBUG 到 * 启用详细日志。可用于提交错误报告。

- 类型： 字符串

• --viewport

服务器启动的Chrome实例的初始视口大小。例如， 1280x720。在无头模式下，最大大小为3840x2160px。

- 类型： 字符串

• --proxyServer

启动浏览器时，Chrome的代理服务器配置作为--Proxy服务器传递。看https://www.chromium.org/developers/design-documents/network-settings/了解详情。

- 类型： 字符串

• --acceptInsecureCerts

如果启用，则忽略与自签名和过期证书相关的错误。小心使用。

- 类型： 布尔

• --chromeArg

Chrome的其他论点。仅适用于Chrome由Chrome devtools mcp启动时。

- 类型： 数组

• --categoryEmulation

设置为false可排除与仿真相关的工具。

- 类型： 布尔 - 违约： true

• --categoryPerformance

设置为false可排除与性能相关的工具。

- 类型： 布尔 - 违约： true

• --categoryNetwork

设置为false可排除与网络相关的工具。

- 类型： 布尔 - 违约： true

通过 args JSON配置中的属性。例如：

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

使用自定义标头通过WebSocket连接

您可以直接连接到Chrome WebSocket端点并包含自定义标头（例如，用于身份验证）：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/",
        "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
      ]
    }
  }
}

要从正在运行的Chrome实例获取WebSocket端点，请访问 http://127.0.0.1:9222/json/version 并寻找 webSocketDebuggerUrl 现场。

你也可以跑步 npx chrome-devtools-mcp@latest --help 查看所有可用的配置选项。

概念

用户数据目录

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

• Linux/macOS： $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
• 窗户： %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

用户数据目录在运行之间不会被清除，也不会在多个运行之间共享 所有实例 chrome-devtools-mcp.设置 isolated 选择 true 使用临时用户数据目录，该目录将在以下情况下自动清除 浏览器已关闭。

连接到正在运行的Chrome实例

您可以使用以下命令连接到正在运行的Chrome实例 --browser-url 选项。如果您想使用现有的Chrome配置文件，或者在不允许启动新Chrome实例的沙盒环境中运行MCP服务器，这将非常有用。

以下是如何连接到正在运行的Chrome稳定版实例的分步指南：

步骤1：配置MCP客户端

添加 --browser-url MCP客户端配置的选项。此选项的值应该是正在运行的Chrome实例的URL。 http://127.0.0.1:9222 这是一个常见的默认设置。

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

步骤2：启动Chrome浏览器

\[！警告\]\ 启用远程调试端口会在正在运行的浏览器实例上打开一个调试端口。您计算机上的任何应用程序都可以连接到此端口并控制浏览器。确保在调试端口打开时，您没有浏览任何敏感网站。

在启用远程调试端口的情况下启动Chrome浏览器。在启动启用调试端口的新Chrome实例之前，请确保关闭所有正在运行的Chrome实例。您选择的端口号必须与您在 --browser-url MCP客户端配置中的选项。

出于安全原因， Chrome要求您使用非默认用户数据目录 启用远程调试端口时。您可以使用 --user-data-dir 旗帜。这可确保您的常规浏览配置文件和数据不会暴露在调试会话中。

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

视窗

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

步骤3：测试您的设置

配置MCP客户端并启动Chrome浏览器后，您可以通过在MCP客户端中运行一个简单的提示来测试您的设置：

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

您的MCP客户端应连接到正在运行的Chrome实例并收到性能报告。

如果遇到VM到主机端口转发问题，请参阅中的“虚拟机（VM）和主机之间的远程调试失败”部分 docs/troubleshooting.md.

有关远程调试的更多详细信息，请参阅 Chrome DevTools文档.

已知限制

操作系统沙盒

一些MCP客户端允许使用macOS安全带或Linux对MCP服务器进行沙盒处理 容器。如果启用了沙盒， chrome-devtools-mcp 无法启动 Chrome需要权限才能创建自己的沙盒。作为一种变通方法， 禁用沙盒 chrome-devtools-mcp 在您的MCP客户端或使用 --browser-url 连接到您在外部手动启动的Chrome实例 MCP客户端沙盒。