ChromeDevTools/chrome-devtools-mcp
GitHub: ChromeDevTools/chrome-devtools-mcp
为AI编程助手提供Chrome DevTools完整能力的MCP服务器，支持浏览器自动化、性能分析和深度调试。
Stars: 29170 | Forks: 1720
# Chrome DevTools MCP
[](https://npmjs.org/package/chrome-devtools-mcp)
`chrome-devtools-mcp` 让您的编码智能体（例如 Gemini、Claude、Cursor 或 Copilot）
能够控制和检查实时的 Chrome 浏览器。它作为 Model-Context-Protocol
(MCP) 服务器，为您的 AI 编程助手提供 Chrome DevTools 的全部能力，
以实现可靠的自动化、深度调试和性能分析。
## [工具参考](./docs/tool-reference.md) | [更新日志](./CHANGELOG.md) | [贡献指南](./CONTRIBUTING.md) | [故障排除](./docs/troubleshooting.md) | [设计原则](./docs/design-principles.md)
## 主要功能
- **获取性能洞察**：使用 [Chrome
DevTools](https://github.com/ChromeDevTools/devtools-frontend) 录制
跟踪信息并提取可操作的 performance insights。
- **高级浏览器调试**：分析网络请求、截屏以及
检查浏览器控制台消息（包含 source-map 处理过的堆栈跟踪）。
- **可靠的自动化**。使用
[puppeteer](https://github.com/puppeteer/puppeteer) 自动化 Chrome 中的操作
并自动等待操作结果。
## 免责声明
`chrome-devtools-mcp` 将浏览器实例的内容暴露给 MCP 客户端，
允许它们检查、调试和修改浏览器或 DevTools 中的任何数据。
请避免共享您不想与 MCP 客户端共享的敏感或个人信息。
性能工具可能会将跟踪 URL 发送到 Google CrUX API 以获取真实用户体验数据。这有助于通过展示现场数据 实验室数据 来提供全面的性能视图。此数据由 [Chrome
User Experience Report (CrUX)](https://developer.chrome.com/docs/crux) 收集。如需禁用
此功能，请使用 `--no-performance-crux` 标志运行。
## **使用情况统计**
Google 收集使用情况统计数据（例如工具调用成功率、延迟和环境信息），以改进 Chrome DevTools MCP 的可靠性和性能。
数据收集**默认启用**。您可以通过在启动服务器时传递 `--no-usage-statistics` 标志来选择退出：
```
"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]
```
Google 根据 [Google 隐私权政策](https://policies.google.com/privacy) 处理此数据。
Google 对 Chrome DevTools MCP 使用情况统计数据的收集独立于 Chrome 浏览器的使用情况统计。选择退出 Chrome 指标不会自动让您退出此工具的统计，反之亦然。
如果设置了 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS 或 CI 环境变量，则收集功能将被禁用。
## 系统要求
- [Node.js](https://nodejs.org/) v20.19 或更新的[最新维护 LTS](https://github.com/nodejs/Release#release-schedule) 版本。
- [Chrome](https://www.google.com/chrome/) 当前稳定版或更新版本。
- [npm](https://www.npmjs.com/)。
## 快速开始
将以下配置添加到您的 MCP 客户端：
```
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
```
如果您只想执行基本的浏览器任务，请使用 `--slim` 模式：
```
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
}
}
}
```
请参阅 [精简版工具参考](./docs/slim-tool-reference.md)。
### MCP 客户端配置
](https://vscode.dev/redirect/mcp/install?name=io.github.ChromeDevTools%2Fchrome-devtools-mcp&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22chrome-devtools-mcp%22%5D%2C%22env%22%3A%7B%7D%7D)
[
](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522io.github.ChromeDevTools%252Fchrome-devtools-mcp%2522%252C%2522config%2522%253A%257B%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522-y%2522%252C%2522chrome-devtools-mcp%2522%255D%252C%2522env%2522%253A%257B%257D%257D%257D)
**或手动安装：**
按照 MCP 安装 指南，
使用上方的标准配置。您也可以使用 VS Code CLI 安装 Chrome DevTools MCP 服务器：
对于 macOS 和 Linux：
```
code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'
```
对于 Windows (PowerShell)：
```
code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'
```
](https://cursor.com/en/install-mcp?name=chrome-devtools&config=eyJjb21tYW5kIjoibnB4IC15IGNocm9tZS1kZXZ0b29scy1tY3BAbGF0ZXN0In0%3D)
**或手动安装：**
转到 `Cursor Settings` -> `MCP` -> `New MCP Server`。使用上方提供的配置。
](https://vs-open.link/mcp-install?%7B%22name%22%3A%22chrome-devtools%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22chrome-devtools-mcp%40latest%22%5D%7D)
### 您的第一个提示
在您的 MCP 客户端中输入以下提示以检查一切是否正常：
```
Check the performance of https://developers.chrome.com
```
您的 MCP 客户端应该会打开浏览器并录制性能跟踪。
## 工具
如果您遇到任何问题，请查看我们的[故障排除指南](./docs/troubleshooting.md)。
- **输入自动化** (9 个工具)
- [`click`](docs/tool-reference.md#click)
- [`drag`](docs/tool-reference.md#drag)
- [`fill`](docs/tool-reference.md#fill)
- [`fill_form`](docs/tool-reference.md#fill_form)
- [`handle_dialog`](docs/tool-reference.md#handle_dialog)
- [`hover`](docs/tool-reference.md#hover)
- [`press_key`](docs/tool-reference.md#press_key)
- [`type_text`](docs/tool-reference.md#type_text)
- [`upload_file`](docs/tool-reference.md#upload_file)
- **导航自动化** (6 个工具)
- [`close_page`](docs/tool-reference.md#close_page)
- [`list_pages`](docs/tool-reference.md#list_pages)
- [`navigate_page`](docs/tool-reference.md#navigate_page)
- [`new_page`](docs/tool-reference.md#new_page)
- [`select_page`](docs/tool-reference.md#select_page)
- [`wait_for`](docs/tool-reference.md#wait_for)
- **模拟** (2 个工具)
- [`emulate`](docs/tool-reference.md#emulate)
- [`resize_page`](docs/tool-reference.md#resize_page)
- **性能** (4 个工具)
- [`performance_analyze_insight`](docs/tool-reference.md#performance_analyze_insight)
- [`performance_start_trace`](docs/tool-reference.md#performance_start_trace)
- [`performance_stop_trace`](docs/tool-reference.md#performance_stop_trace)
- [`take_memory_snapshot`](docs/tool-reference.md#take_memory_snapshot)
- **网络** (2 个工具)
- [`get_network_request`](docs/tool-reference.md#get_network_request)
- [`list_network_requests`](docs/tool-reference.md#list_network_requests)
- **** (6 个工具)
- [`evaluate_script`](docs/tool-reference.md#evaluate_script)
- [`get_console_message`](docs/tool-reference.md#get_console_message)
- [`lighthouse_audit`](docs/tool-reference.md#lighthouse_audit)
- [`list_console_messages`](docs/tool-reference.md#list_console_messages)
- [`take_screenshot`](docs/tool-reference.md#take_screenshot)
- [`take_snapshot`](docs/tool-reference.md#take_snapshot)
## 配置
Chrome DevTools MCP 服务器支持以下配置选项：
- **`--autoConnect`/ `--auto-connect`**
如果指定，将自动连接到由 channel 参数标识的用户数据目录中运行的本地浏览器（Chrome 144+）。需要通过 chrome://inspect/#remote-debugging 在 Chrome 实例中启动远程调试服务器。
- **类型：** boolean
- **默认值：** `false`
- **`--browserUrl`/ `--browser-url`, `-u`**
连接到正在运行的可调试 Chrome 实例（例如 `http://127.0.0.1:9222`）。更多详情请参阅：https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance。
- **类型：** string
- **`--wsEndpoint`/ `--ws-endpoint`, `-w`**
用于连接到正在运行的 Chrome 实例的 WebSocket 端点（例如 ws://127.0.0.1:9222/devtools/browser/）。--browserUrl 的替代方案。
- **类型：** string
- **`--wsHeaders`/ `--ws-headers`**
JSON 格式的 WebSocket 连接自定义标头（例如 '{"Authorization":"Bearer token"}'）。仅适用于 --wsEndpoint。
- **类型：** string
- **`--headless`**
是否以无头（无 UI）模式运行。
- **类型：** boolean
- **默认值：** `false`
- **`--executablePath`/ `--executable-path`, `-e`**
自定义 Chrome 可执行文件的路径。
- **类型：** string
- **`--isolated`**
如果指定，将创建一个临时的 user-data-dir，并在浏览器关闭后自动清理。默认为 false。
- **类型：** boolean
- **`--userDataDir`/ `--user-data-dir`**
Chrome 用户数据目录的路径。默认为 $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE
- **类型：** string
- **`--channel`**
指定应使用的不同 Chrome 版本通道。默认为稳定版通道。
- **类型：** string
- **可选值：** `stable`, `canary`, `beta`, `dev`
- **`--logFile`/ `--log-file`**
写入调试日志的文件路径。将环境变量 `DEBUG` 设置为 `*` 以启用详细日志。用于提交错误报告。
- **类型：** string
- **`--viewport`**
服务器启动的 Chrome 实例的初始视口大小。例如 `1280x720`。在无头模式下，最大尺寸为 3840x2160px。
- **类型：** string
- **`--proxyServer`/ `--proxy-server`**
启动浏览器时传递给 Chrome 的代理服务器配置，作为 --proxy-server 传递。详情请参阅 https://www.chromium.org/developers/design-documents/network-settings/。
- **类型：** string
- **`--acceptInsecureCerts`/ `--accept-insecure-certs`**
如果启用，将忽略与自签名证书和过期证书相关的错误。请谨慎使用。
- **类型：** boolean
- **`--experimentalScreencast`/ `--experimental-screencast`**
启用实验性截屏工具（需要 ffmpeg）。安装 ffmpeg https://www.ffmpeg.org/download.html 并确保它在 MCP 服务器 PATH 中可用。
- **类型：** boolean
- **`--chromeArg`/ `--chrome-arg`**
Chrome 的额外参数。仅在 Chrome 由 chrome-devtools-mcp 启动时适用。
- **类型：** array
- **`--ignoreDefaultChromeArg`/ `--ignore-default-chrome-arg`**
显式禁用 Chrome 的默认参数。仅在 Chrome 由 chrome-devtools-mcp 启动时适用。
- **类型：** array
- **`--categoryEmulation`/ `--category-emulation`**
设置为 false 以排除与模拟相关的工具。
- **类型：** boolean
- **默认值：** `true`
- **`--categoryPerformance`/ `--category-performance`**
设置为 false 以排除与性能相关的工具。
- **类型：** boolean
- **默认值：** `true`
- **`--categoryNetwork`/ `--category-network`**
设置为 false 以排除与网络相关的工具。
- **类型：** boolean
- **默认值：** `true`
- **`--performanceCrux`/ `--performance-crux`**
设置为 false 以禁用将性能跟踪中的 URL 发送到 CrUX API 以获取现场性能数据。
- **类型：** boolean
- **默认值：** `true`
- **`--usageStatistics`/ `--usage-statistics`**
设置为 false 以选择退出使用情况统计收集。Google 收集使用数据以改进工具，根据 Google 隐私权政策 (https://policies.google.com/privacy) 处理。这独立于 Chrome 浏览器指标。如果设置了 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS 或 CI 环境变量，则禁用。
- **类型：** boolean
- **默认值：** `true`
- **`--slim`**
公开一套仅包含 3 个工具的“精简”集，涵盖导航、脚本执行和截图。适用于基本的浏览器任务。
- **类型：** boolean
通过 JSON 配置中的 `args` 属性传递它们。例如：
```
{
"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`
- Windows: `%HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL`
用户数据目录在运行之间不会被清除，并在 `chrome-devtools-mcp` 的所有实例之间共享。将 `isolated` 选项设置为 `true` 以改为使用临时用户数据目录，该目录将在浏览器关闭后自动清除。
### 连接到正在运行的 Chrome 实例
默认情况下，Chrome DevTools MCP 服务器将使用专用配置文件启动一个新的 Chrome 实例。这在所有情况下可能并不理想：
- 如果您希望在手动站点测试和智能体驱动的测试之间交替时保持相同的应用程序状态。
- 当 MCP 需要登录网站时。当浏览器通过 WebDriver（Chrome DevTools MCP 服务器的默认启动机制）控制时，某些账户可能会阻止登录。
- 如果您在沙盒环境中运行 LLM，但希望连接到在沙盒外运行的 Chrome 实例。
在这些情况下，请先启动 Chrome，然后让 Chrome DevTools MCP 服务器连接到它。有两种方法可以做到这一点：
- **自动连接（在 Chrome 144 中可用）**：最适合在手动测试和智能体驱动的测试之间共享状态。
- **通过远程调试端口手动连接**：最适合在沙盒环境内运行时。
#### 自动连接到正在运行的 Chrome 实例
**步骤 1：** 在 Chrome 中设置远程调试
在 Chrome（>= M144）中，执行以下操作以设置远程调试：
1. 导航到 `chrome://inspect/#remote-debugging` 以启用远程调试。
2. 按照对话框 UI 允许或禁止传入的调试连接。
**步骤 2：** 配置 Chrome DevTools MCP 服务器以自动连接到正在运行的 Chrome 实例
要将 `chrome-devtools-mcp` 服务器连接到正在运行的 Chrome 实例，请为 MCP 服务器使用 `--autoConnect` 命令行参数。
以下代码片段是 gemini-cli 的示例配置：
```
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest", "--autoConnect"]
}
}
}
```
**步骤 3：** 测试您的设置
确保您的浏览器正在运行。打开 gemini-cli 并运行以下提示：
```
Check the performance of https://developers.chrome.com
```
Chrome DevTools MCP 服务器将尝试连接到您正在运行的 Chrome 实例。它会显示一个请求用户权限的对话框。
点击 **允许** 将导致 Chrome DevTools MCP 服务器打开
[developers.chrome.com](http://developers.chrome.com) 并进行性能
跟踪。
#### 使用端口转发进行手动连接
您可以使用 `--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 实例。您选择的端口号必须与 MCP 客户端配置中的 `--browser-url` 选项中指定的端口号相同。
出于安全原因，[Chrome 要求您在启用远程调试端口时使用非默认的用户数据目录](https://developer.chrome.com/blog/remote-debugging-port)。您可以使用 `--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
```
**Windows**
```
"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 实例并接收性能报告。
如果您遇到虚拟机到主机端口转发问题，请参阅 [`docs/troubleshooting.md`](./docs/troubleshooting.md#remote-debugging-between-virtual-machine-vm-and-host-fails) 中的“虚拟机 (VM) 与主机之间的远程调试失败”部分。
有关远程调试的更多详细信息，请参阅 [Chrome DevTools 文档](https://developer.chrome.com/docs/devtools/remote-debugging/)。
### 调试 Android 上的 Chrome
请参阅[这些说明](./docs/debugging-android.md)。
## 已知限制
请参阅 [故障排除](./docs/troubleshooting.md)。
Amp
遵循 https://ampcode.com/manual#mcp 并使用上方提供的配置。您也可以使用 CLI 安装 Chrome DevTools MCP 服务器： ``` amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest ```Antigravity
要使用 Chrome DevTools MCP 服务器，请按照 Antigravity 的文档 中的说明安装自定义 MCP 服务器。将以下配置添加到 MCP 服务器配置中： ``` { "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222", "-y" ] } } } ``` 这将使 Chrome DevTools MCP 服务器自动连接到 Antigravity 正在使用的浏览器。如果您使用的不是端口 9222，请务必相应地进行调整。 使用此方法时，Chrome DevTools MCP 不会自动启动浏览器实例，因为 Chrome DevTools MCP 服务器会连接到 Antigravity 的内置浏览器。如果浏览器尚未运行，您必须先点击右上角的 Chrome 图标来启动它。Claude Code
**通过 CLI 安装（仅 MCP）** 使用 Claude Code CLI 添加 Chrome DevTools MCP 服务器（指南）： ``` claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest ``` **作为插件安装（MCP + Skills）** 要安装带技能 的 Chrome DevTools MCP，请在 Claude Code 中添加市场注册表： ``` /plugin marketplace add ChromeDevTools/chrome-devtools-mcp ``` 然后，安装插件： ``` /plugin install chrome-devtools-mcp ``` 重启 Claude Code 以加载 MCP 服务器和技能（使用 `/skills` 检查）。Cline
遵循 https://docs.cline.bot/mcp/configuring-mcp-servers 并使用上方提供的配置。Codex
按照 配置 MCP 指南 使用上方的标准配置。您也可以使用 Codex CLI 安装 Chrome DevTools MCP 服务器： ``` codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest ``` **在 Windows 11 上** 通过更新 `.codex/config.toml` 并添加以下 `env` 和 `startup_timeout_ms` 参数，配置 Chrome 安装位置并增加启动超时时间： ``` [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` 保存配置： - **Server name:** `chrome-devtools` - **Server Type:** `[1] Local` - **Command:** `npx -y chrome-devtools-mcp@latest`Copilot / VS Code
**点击按钮安装：** [](https://vscode.dev/redirect/mcp/install?name=io.github.ChromeDevTools%2Fchrome-devtools-mcp&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22chrome-devtools-mcp%22%5D%2C%22env%22%3A%7B%7D%7D)
[](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522io.github.ChromeDevTools%252Fchrome-devtools-mcp%2522%252C%2522config%2522%253A%257B%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522-y%2522%252C%2522chrome-devtools-mcp%2522%255D%252C%2522env%2522%253A%257B%257D%257D%257D)
**或手动安装：**
按照 MCP 安装 指南，
使用上方的标准配置。您也可以使用 VS Code CLI 安装 Chrome DevTools MCP 服务器：
对于 macOS 和 Linux：
```
code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'
```
对于 Windows (PowerShell)：
```
code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'
```
Cursor
**点击按钮安装：** [](https://cursor.com/en/install-mcp?name=chrome-devtools&config=eyJjb21tYW5kIjoibnB4IC15IGNocm9tZS1kZXZ0b29scy1tY3BAbGF0ZXN0In0%3D)
**或手动安装：**
转到 `Cursor Settings` -> `MCP` -> `New MCP Server`。使用上方提供的配置。
Factory CLI
使用 Factory CLI 添加 Chrome DevTools MCP 服务器（指南）： ``` droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest" ```Gemini CLI
使用 Gemini CLI 安装 Chrome DevTools MCP 服务器。 **项目级：** ``` # 仅 MCP： gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest # 或作为 Gemini 扩展 (MCP+Skills)： gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp ``` **全局：** ``` gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest ``` 或者，按照 MCP 指南 并使用上方的标准配置。Gemini Code Assist
按照 配置 MCP 指南 使用上方的标准配置。JetBrains AI Assistant & Junie
转到 `Settings | Tools | AI Assistant | Model Context Protocol (MCP)` -> `Add`。使用上方提供的配置。 同样地，可以在 `Settings | Tools | Junie | MCP Settings` -> `Add` 中为 JetBrains Junie 配置 chrome-devtools-mcp。使用上方提供的配置。Kiro
在 **Kiro Settings** 中，转到 `Configure MCP` > `Open Workspace or User MCP Config` > 使用上方提供的配置片段。 或者，从 IDE **Activity Bar** > `Kiro` > `MCP Servers` > `Click Open MCP Config`。使用上方提供的配置片段。Katalon Studio
Chrome DevTools MCP 服务器可以通过 MCP 代理与 Katalon StudioAssist 配合使用。 **步骤 1：** 按照 MCP 代理设置指南 安装 MCP 代理。 **步骤 2：** 使用代理启动 Chrome DevTools MCP 服务器： ``` mcp-proxy --transport streamablehttp --port 8080 -- npx -y chrome-devtools-mcp@latest ``` **注意：** 如果端口 8080 已被占用，您可能需要选择另一个端口。 **步骤 3：** 在 Katalon Studio 中，使用以下设置将服务器添加到 StudioAssist： - **Connection URL:** `http://127.0.0.1:8080/mcp` - **Transport type:** `HTTP` 连接后，Chrome DevTools MCP 工具将在 StudioAssist 中可用。OpenCode
将以下配置添加到您的 `opencode.json` 文件中。如果您没有该文件，请在 `~/.config/opencode/opencode.json` 创建一个（指南）： ``` { "$schema": "https://opencode.ai/config.json", "mcp": { "chrome-devtools": { "type": "local", "command": ["npx", "-y", "chrome-devtools-mcp@latest"] } } } ```Qoder
在 **Qoder Settings** 中，转到 `MCP Server` > `+ Add` > 使用上方提供的配置片段。 或者，按照 MCP 指南 并使用上方的标准配置。Qoder CLI
使用 Qoder CLI 安装 Chrome DevTools MCP 服务器（指南）： **项目级：** ``` qodercli mcp add chrome-devtools -- npx chrome-devtools-mcp@latest ``` **全局：** ``` qodercli mcp add -s user chrome-devtools -- npx chrome-devtools-mcp@latest ```Visual Studio
**点击按钮安装：** [](https://vs-open.link/mcp-install?%7B%22name%22%3A%22chrome-devtools%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22chrome-devtools-mcp%40latest%22%5D%7D)
Warp
转到 `Settings | AI | Manage MCP Servers` -> `+ Add` 以 [添加 MCP 服务器](https://docs.warp.dev/knowledge-and-collaboration/mcp#adding-an-mcp-server)。使用上方提供的配置。Windsurf
按照 配置 MCP 指南 使用上方的标准配置。标签：AI编程助手, Chrome DevTools, Claude, Copilot, Cursor, CVE检测, LLM工具集成, MCP, MITM代理, Model Context Protocol, Puppeteer, RPA, 堆栈跟踪, 威胁情报, 开发者工具, 性能分析, 截图, 无头浏览器, 浏览器控制, 浏览器自动化, 网络请求分析, 自动化攻击, 逆向工程辅助