Chrome DevTools MCP

项目简介

chrome-devtools-mcp 是 Chrome DevTools 团队推出的 MCP（Model-Context-Protocol）服务器，同时附带 chrome-devtools CLI。它让 Claude、Cursor、Copilot、Antigravity 等编码智能体能够控制并检查一个真实的 Chrome 浏览器，从而完成可靠的自动化、深度调试与性能分析。

核心能力

• 性能洞察：借助 Chrome DevTools 录制 trace，并提取可执行的性能建议。
• 浏览器调试：分析网络请求、截图、读取控制台消息（含 source map 堆栈）。
• 可靠自动化：基于 Puppeteer 执行操作，并自动等待结果。

快速接入

在 MCP 客户端中加入如下配置即可启动：

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

随后可尝试提示词：Check the performance of https://developers.chrome.com，客户端应自动打开浏览器并录制性能 trace。

CLI 用法

除 MCP 外，也可在终端直接驱动浏览器：

npm i chrome-devtools-mcp@latest -g
chrome-devtools navigate_page 1 --url "https://developers.chrome.com"
chrome-devtools take_screenshot 1 --filePath screenshot.png
chrome-devtools stop

Skills 扩展

项目内置多个 Skills，教 Agent 如何用好 DevTools，例如：

• chrome-devtools：用 MCP 工具调试与自动化页面
• a11y-debugging：审计并修复可访问性问题
• cookie-debugging：排查 Cookie、会话与鉴权
• debug-optimize-lcp：定位并优化 LCP
• memory-leak-debugging：发现并修复内存泄漏

支持以插件方式安装（Claude Code、Copilot/VS Code、Gemini CLI），也可手动复制到 Agent 的 skills 目录。

注意事项

• 该工具会把浏览器内容暴露给 MCP 客户端，请避免共享敏感或个人信息。
• 官方仅支持 Chrome 与 Chrome for Testing，其他 Chromium 浏览器可能异常。
• 默认开启使用统计，可用 --no-usage-statistics 关闭；性能工具可能向 CrUX API 发送 trace URL，可用 --no-performance-crux 关闭。
• 需要 Node.js LTS、较新版本 Chrome 与 npm。