Chrome开发者工具MCP
chrome-devtools-mcp 是一个工具，允许编码代理控制和检查实时的 Chrome 浏览器。它作为一个 MCP 服务器运行，提供对 Chrome DevTools 的完全访问权限，以实现自动化、调试和性能分析。
MCP 服务配置
复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用
{
"mcpServers": {
"chrome-devtools": {
"args": [
"chrome-devtools-mcp@latest",
"--channel=canary",
"--headless=true",
"--isolated=true"
],
"command": "npx"
}
}
}可用工具 （26 个）
该服务在 MCP 协议中暴露的工具，AI 可按需调用
list_console_messages
List all console messages for the currently selected page
该工具无需必填参数，直接调用即可
emulate_cpu 1 个参数 需填 1 项
Emulates CPU throttling by slowing down the selected page's execution.
必填参数：throttlingRate
emulate_network 1 个参数 需填 1 项
Emulates network conditions such as throttling on the selected page.
必填参数：throttlingOption
click 2 个参数 需填 1 项
Clicks on the provided element
必填参数：uid
drag 2 个参数 需填 2 项
Drag an element onto another element
必填参数：from_uid、to_uid
fill 2 个参数 需填 2 项
Type text into a input, text area or select an option from a <select> element.
必填参数：uid、value
fill_form 1 个参数 需填 1 项
Fill out multiple form elements at once
必填参数：elements
hover 1 个参数 需填 1 项
Hover over the provided element
必填参数：uid
upload_file 2 个参数 需填 2 项
Upload a file through a provided element.
必填参数：uid、filePath
get_network_request 1 个参数 需填 1 项
Gets a network request by URL. You can get all requests by calling list_network_requests.
必填参数：url
list_network_requests
List all requests for the currently selected page
该工具无需必填参数，直接调用即可
close_page 1 个参数 需填 1 项
Closes the page by its index. The last open page cannot be closed.
必填参数：pageIdx
handle_dialog 2 个参数 需填 1 项
If a browser dialog was opened, use this command to handle it
必填参数：action
list_pages
Get a list of pages open in the browser.
该工具无需必填参数，直接调用即可
navigate_page 1 个参数 需填 1 项
Navigates the currently selected page to a URL.
必填参数：url
navigate_page_history 1 个参数 需填 1 项
Navigates the currently selected page.
必填参数：navigate
new_page 1 个参数 需填 1 项
Creates a new page
必填参数：url
resize_page 2 个参数 需填 2 项
Resizes the selected page's window so that the page has specified dimension
必填参数：width、height
select_page 1 个参数 需填 1 项
Select a page as a context for future tool calls.
必填参数：pageIdx
performance_analyze_insight 1 个参数 需填 1 项
Provides more detailed information on a specific Performance Insight that was highlighed in the results of a trace recording.
必填参数：insightName
performance_start_trace 2 个参数 需填 2 项
Starts a performance trace recording on the selected page.
必填参数：reload、autoStop
performance_stop_trace
Stops the active performance trace recording on the selected page.
该工具无需必填参数，直接调用即可
take_screenshot 3 个参数
Take a screenshot of the page or element.
该工具无需必填参数，直接调用即可
evaluate_script 2 个参数 需填 1 项
Evaluate a JavaScript function inside the currently selected page. Returns the response as JSON so returned values have to JSON-serializable.
必填参数：function
take_snapshot
Take a text snapshot of the currently selected page. The snapshot lists page elements along with a unique identifier (uid). Always use the latest snapshot. Prefer taking a snapshot over taking a screenshot.
该工具无需必填参数，直接调用即可
wait_for 1 个参数 需填 1 项
Wait for the specified text to appear on the selected page.
必填参数：text
服务介绍
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 个工具）
- 导航自动化 (7 个工具)
- 模拟 (3 个工具)
- 性能 (3 个工具)
- 网络 (2 个工具)
- 调试 (4 个工具)
配置
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 实例。
