AI Skill Hub 强烈推荐:Chrome DevTools MCP 是一款优质的MCP工具。在 GitHub 上收获超过 39.4k 颗 Star,AI 综合评分 8.5 分,在同类工具中表现稳健。如果你正在寻找可靠的MCP工具解决方案,这是一个值得深入了解的选择。
为编码Agent提供Chrome DevTools集成的开源MCP工具。支持浏览器自动化、调试和开发工具交互,帮助AI Agent进行网页测试、元素检查、性能分析等任务,适合AI工程师和自动化开发者。
Chrome DevTools MCP 是一款遵循 MCP(Model Context Protocol)标准协议的 AI 工具扩展。通过 MCP 协议,它可以让 Claude、Cursor 等主流 AI 客户端直接访问和操作外部工具、数据源和服务,实现 AI 能力的无缝扩展。无论是文件操作、数据库查询还是 API 调用,都可以通过自然语言在 AI 对话中直接触发,极大提升生产效率。
为编码Agent提供Chrome DevTools集成的开源MCP工具。支持浏览器自动化、调试和开发工具交互,帮助AI Agent进行网页测试、元素检查、性能分析等任务,适合AI工程师和自动化开发者。
Chrome DevTools MCP 是一款遵循 MCP(Model Context Protocol)标准协议的 AI 工具扩展。通过 MCP 协议,它可以让 Claude、Cursor 等主流 AI 客户端直接访问和操作外部工具、数据源和服务,实现 AI 能力的无缝扩展。无论是文件操作、数据库查询还是 API 调用,都可以通过自然语言在 AI 对话中直接触发,极大提升生产效率。
# 方式一:通过 Claude Code CLI 一键安装
claude skill install https://github.com/ChromeDevTools/chrome-devtools-mcp
# 方式二:手动配置 claude_desktop_config.json
{
"mcpServers": {
"chrome-devtools-mcp": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp"]
}
}
}
# 配置文件位置
# macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
# Windows: %APPDATA%/Claude/claude_desktop_config.json
# 安装后在 Claude 对话中直接使用 # 示例: 用户: 请帮我用 Chrome DevTools MCP 执行以下任务... Claude: [自动调用 Chrome DevTools MCP MCP 工具处理请求] # 查看可用工具列表 # 在 Claude 中输入:"列出所有可用的 MCP 工具"
// claude_desktop_config.json 配置示例
{
"mcpServers": {
"chrome_devtools_mcp": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp"],
"env": {
// "API_KEY": "your-api-key-here"
}
}
}
}
// 保存后重启 Claude Desktop 生效
Chrome DevTools for agents (chrome-devtools-mcp) lets your coding agent (such as Antigravity, 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. A [CLI][cli] is also provided for use without MCP.
[Tool reference][tool-reference] | [Changelog][changelog] | [Contributing][contributing] | [Troubleshooting][troubleshooting] | [Design Principles][design-principles]
- Get performance insights: Uses Chrome DevTools to record traces and extract actionable performance insights. - Advanced browser debugging: Analyze network requests, take screenshots and check browser console messages (with source-mapped stack traces). - Reliable automation. Uses puppeteer to automate actions in Chrome and automatically wait for action results.
Add the following config to your MCP client:
{
"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.
If you are interested in doing only basic browser tasks, use the --slim mode:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
}
}
}
See [Slim tool reference][slim-tool-reference].
Google collects usage statistics (such as tool invocation success rates, latency, and environment information) to improve the reliability and performance of Chrome DevTools MCP.
Data collection is enabled by default. You can opt-out by passing the --no-usage-statistics flag when starting the server:
"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]
Google handles this data in accordance with the Google Privacy Policy.
Google's collection of usage statistics for Chrome DevTools MCP is independent from the Chrome browser's usage statistics. Opting out of Chrome metrics does not automatically opt you out of this tool, and vice-versa.
Collection is disabled if CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS or CI env variables are set.
For advanced features such as handling concurrent sessions, persistent user data directories, connecting to a running Chrome instance instead of starting a new one, or debugging on Android, see our [Advanced Usage Guide][advanced-usage-guide].
For setup instructions specific to your editor or agent (e.g. Antigravity, Claude Code, Cursor, VS Code), please see our [Client Configurations Guide][client-configurations-guide].
Find the complete list of server parameters (e.g., --headless, --isolated, --slim) and how to configure WebSocket connections in the [Configuration Guide][configuration-guide].
Chrome DevTools for agents 是一个让您的编码代理(如 Antigravity、Claude、Cursor 或 Copilot)控制和检查一个活跃 Chrome 浏览器的工具。它作为一个 Model-Context-Protocol (MCP) 服务器,给您的 AI 编码助手提供对 Chrome DevTools 的访问。
该项目提供了以下关键功能:获取性能见解、进阶浏览器调试和可靠的自动化。它使用 Chrome DevTools 来记录跟踪和提取可操作的性能见解,分析网络请求,截图和检查浏览器控制台消息(带有源映射的堆栈跟踪)。
该项目需要以下环境依赖和系统要求:Node.js LTS 版本、Chrome 当前稳定版或更新版本、npm。
要开始使用该项目,请在您的 MCP 客户端中添加以下配置:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"] } } }。您也可以使用 --slim 模式来进行基本的浏览器任务。
使用该项目时,Google 会收集使用统计信息(如工具调用成功率、延迟和环境信息)来改进 Chrome DevTools MCP 的可靠性和性能。数据收集默认开启。您可以通过传递 --no-usage-statistics 标志来关闭数据收集。
该项目支持以下配置选项:--autoConnect/--auto-connect。如果指定,会自动连接到一个运行在本地的浏览器(Chrome 144+)中,从用户数据目录中识别的渠道参数(默认渠道是稳定)。需要在 Chrome 中启动远程调试服务器。
该项目可以作为一个 Gemini 扩展(MCP+技能)安装:gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp。您也可以使用以下命令全局安装:gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest
工具参考 | 更改日志
高星开源项目,为AI Agent赋能浏览器交互能力。TypeScript实现稳定可靠,活跃维护中,是Agent自动化的重要基础设施。
AI Skill Hub 为第三方内容聚合平台,本页面信息基于公开数据整理,不对工具功能和质量作任何法律背书。
建议在沙箱或测试环境中充分验证后,再部署至生产环境,并做好必要的安全评估。
✅ Apache 2.0 — 宽松开源协议,可商用,需保留版权声明和 NOTICE 文件,含专利授权条款。
总体来看,Chrome DevTools MCP 是一款质量优秀的MCP工具,在同类工具中具备一定竞争力。AI Skill Hub 将持续追踪其更新动态,建议收藏备用,结合自身场景选择合适时机引入使用。
| 原始名称 | chrome-devtools-mcp |
| 原始描述 | 开源MCP工具:Chrome DevTools for coding agents。⭐39.4k · TypeScript |
| Topics | 浏览器自动化DevTools集成调试工具Agent能力扩展Chrome |
| GitHub | https://github.com/ChromeDevTools/chrome-devtools-mcp |
| License | Apache-2.0 |
| 语言 | TypeScript |
收录时间:2026-05-13 · 更新时间:2026-05-16 · License:Apache-2.0 · AI Skill Hub 不对第三方内容的准确性作法律背书。
选择 Agent 类型,复制安装指令后粘贴到对应客户端