Chrome DevTools MCP Skill：让 AI 编程助手直接操控 Chrome 浏览器的官方方案

Skill超级捕获手 技术创作者 2026-07-30 15 阅读

让 AI 编程助手直接操控 Chrome 浏览器——这不是概念，而是 chrome-devtools-mcp 正在实现的事。这个由 Chrome DevTools 官方团队维护的 MCP（Model Context Protocol）服务器，将 Puppeteer 驱动的浏览器自动化能力以工具形式开放给所有主流 AI Coding Agent：Claude Code、Cursor、Copilot、Codex、Antigravity 全部支持。47.9k Star、今日新增 73 Star、Commit 就在 1 小时前，活跃度远超一般 Skill 类项目。

功能与原则

chrome-devtools-mcp 的核心设计原则有两点：可靠自动化和深度调试能力。

它通过 Puppeteer 控制真实 Chrome 实例，所有操作自动等待结果返回，不依赖坐标点击或 OCR 识别。AI 发出的每个浏览器指令都有确定性反馈——元素找不到会等待，弹窗出现会处理，网络请求可追踪。

工具按功能分为 10 个大类，共 50+ 工具：输入自动化（click/drag/fill/type 等）、导航控制、性能分析（trace + Lighthouse）、网络请求监听、调试（console/screenshot/snapshot）、内存堆快照分析、浏览器扩展管理、第三方开发者工具调用。

认可度

  • GitHub Star：47.9k（截至 2026-07-30）
  • Fork：3.3k
  • 今日新增：73 stars
  • Issues：75 个 / Pull requests：39 个——维护活跃
  • 最新 Commit：2026-07-30 21:37（1 小时前）
  • 最新版本：1.6.0（2026-07-14）
  • 出现在 GitHub Trending 今日列表，TypeScript 分类排名靠前
  • MCP 官方支持 Claude Code、Cursor、Copilot、Codex、Antigravity 五大主流 Coding Agent

链接

GitHub：https://github.com/ChromeDevTools/chrome-devtools-mcp

原作者

由 ChromeDevTools 官方组织维护，主要贡献者包括 @OrKoN、@Lightning00Blade（活跃提交者）、@dependabot，以及 Chrome DevTools 团队的工程师。Puppeteer 是其底层依赖，Chrome for Testing 计划确保最新 Chrome 功能同步。

介绍

chrome-devtools-mcp 最初为 Google 内部 AI Coding Agent（Antigravity）打造，随后开源给所有 MCP 兼容 Agent 使用。与简单截图 OCR 或坐标点击类工具不同，它直接调用 Chrome DevTools Protocol（CDP），拥有对浏览器的完整控制权。

对于 AI Agent 而言，这意味着：当 AI 需要验证网页渲染效果时，不再只能看代码——它可以实际打开页面、截图、检查网络请求、读取 console 日志、跑 Lighthouse 性能审计、分析内存堆快照。这些能力将”浏览器测试”从人类专属操作变成了 AI 可编程的任务。

项目还内置了 Skills 机制（在 skills/ 目录下），提供内存泄漏调试、性能分析等专项指导，让 AI 在使用工具时获得专家级引导，而不只是盲目调用 API。

特点

  • 真实浏览器自动化：基于 Puppeteer + Chrome DevTools Protocol，结果确定，不依赖 AI 幻觉
  • 50+ 工具覆盖：涵盖输入、导航、性能、网络、调试、内存、扩展管理等全链路能力
  • 多 Agent 原生支持：Claude Code、Cursor、Copilot、Codex、Antigravity 均有官方集成文档
  • Skills 加持：内置专项 Skill（如 memory-leak-debugging），AI 使用工具时自动获得专家级提示
  • 性能数据真实：调用 Google CrUX API 获取真实用户体验数据，Lighthouse 审计直接跑在目标页面
  • CLI 独立使用：不通过 MCP 时也可单独使用，适合本地调试场景

使用方法

MCP 配置（通用）：

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

Claude Code 安装为 Plugin（含 Skills）：

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

轻量模式（仅基础浏览器操作）：

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

基本调用示例（让 AI 打开网页截图）：

AI Agent → navigate_page(url="https://example.com")
AI Agent → take_screenshot()
AI Agent → get_console_messages()

使用场景与人群

适用场景：
– AI Coding Agent 自动化测试 Web 应用（填写表单、点击按钮、验证 UI 状态）
– 性能问题排查：让 AI 跑 Lighthouse 审计并解读报告
– 内存泄漏定位：AI 自动抓取堆快照并分析保留路径
– 网络请求分析：监听 XHR/Fetch 请求，验证 API 调用正确性
– 前端调试：读取 console 日志（含 Source Map 还原后的堆栈）

目标用户：
– 使用 Claude Code、Cursor 等 AI 编程工具的开发者
– 需要 AI 辅助做 Web 自动化测试的团队
– 前端性能工程师（用 AI 辅助分析 Lighthouse 数据）
– MCP 生态开发者（研究 Agent 与浏览器深度集成方案）

输入与输出案例

案例 1：AI 自动跑 Lighthouse 性能审计

Input：

AI Agent 调用 lighthouse_audit(url="https://example.com", category=["performance"])

Output：

Performance Score: 72
FCP: 1.8s | LCP: 3.2s | TBT: 450ms
建议：延迟加载首屏外图片，优化 CSS 阻塞

案例 2：AI 分析内存堆快照找泄漏

Input：

AI Agent 调用 take_heapsnapshot() → get_heapsnapshot_summary() → 
get_heapsnapshot_retaining_paths(object_id="xxx")

Output：

Detached DOM 节点：12 个
保留路径：map[key] → obj → DOM node
根因：setTimeout 未清理，定时器引用了已脱离 DOM 的元素

GitHub: https://github.com/ChromeDevTools/chrome-devtools-mcp

评论区

0 条评论

登录后可评论。

Skill超级捕获手 15 阅读