ChromeDevTools/chrome-devtools-mcp

Chrome DevTools for agents (chrome-devtools-mcp)

它是什么

• 一个 npm 打包的服务器 (Model-Context-Protocol, MCP) 和 CLI，允许 AI 编码助手（Claude、Cursor、Copilot、Antigravity 等）通过完整的 Chrome DevTools 堆栈驱动实时 Chrome 浏览器。
• 基于 puppeteer 进行自动化，并使用官方 devtools-frontend 库进行追踪、调试和性能分析。

核心能力

能力	功能
性能洞察	记录 Chrome 追踪，提取指标（LCP、FID 等），并可选择使用来自 CrUX API 的真实用户数据进行增强。
高级调试	访问网络日志、控制台消息（带有源映射的堆栈追踪）、截屏以及检查 DOM/CSS。
可靠的自动化	由 Puppeteer 驱动的操作，自动等待页面加载、导航和其他异步事件，减少脚本的不稳定性。
CLI 访问	可直接从终端 (chrome-devtools …) 使用相同的工具集，无需 MCP 客户端即可进行脚本编写。
技能包	为主流代理（Claude Code、Copilot、Gemini）预设的“技能”（类似 JSON 的定义），将 MCP 命令暴露为自然语言工具。

典型用例

• 代理驱动的 Web 开发：LLM 可以要求工具打开页面、运行性能审计并反馈可操作的建议。
• 自动化测试与调试：代理可以在无需手动交互的情况下重现错误、捕获网络流量或定位内存泄漏。
• 可访问性审计：a11y-debugging 技能允许助手运行 Chrome 的 a11y 审计并建议修复方案。
• 性能优化：使用 debug-optimize-lcp 技能查明 Largest Contentful Paint 缓慢的原因并获取具体建议。

如何开始

1. 使用 npm 全局（或本地）安装：

   npm i -g chrome-devtools-mcp@latest
   

2. 将 MCP 服务器添加到代理的配置中，例如：

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

3. 在代理的聊天中，输入类似 Check the performance of https://developers.chrome.com 的提示。服务器将启动 Chrome、记录追踪并返回分析结果。
4. 对于仅终端的使用方式，运行如下命令：

   chrome-devtools navigate_page 1 --url "https://example.com"
   chrome-devtools take_screenshot 1 --filePath out.png
   

安装与要求

• Node.js LTS
• 当前稳定的 Chrome（或 Chrome for Testing）
• npm
• 可选：设置 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1 或 --no-usage-statistics 以选择退出 Google 收集的使用数据。

限制与注意事项

• 该工具向 MCP 客户端暴露了整个浏览器状态；如果会话可能包含敏感数据，请勿连接不受信任的代理。
• 官方仅支持 Google Chrome；其他 Chromium 分支可能有效，但不保证支持。

了解更多

• CLI 指南 – 命令和标志的完整列表。
• 工具参考 – 详细的 MCP 方法签名。
• 技能目录 – 适用于各种代理的即用型技能定义。
• 高级使用指南 – 并发会话、持久化配置文件、Android 调试等。

总结 chrome-devtools-mcp 架起了大语言模型代理与强大的 Chrome DevTools 套件之间的桥梁，为 AI 驱动的开发者提供了一种可靠的方式，通过自然语言提示直接自动化、调试和优化网页。