chrome-devtools-mcp 是 Chrome DevTools 官方团队推出的一个 MCP（Model Context Protocol）服务器，它把整个 Chrome 开发者工具的能力开放给 AI 编程助手——让 Claude、Cursor、Copilot、Gemini CLI 等智能体能够直接控制并检视一个真实运行的 Chrome 浏览器，实现可靠的自动化、深度调试和性能分析。截至目前该项目在 GitHub 已收获约 46,700+ Stars。
项目简介
一句话说明：chrome-devtools-mcp 让你的 AI 编程助手拥有一双”眼睛”和一双”手”，可以打开网页、点击操作、查看网络请求与控制台报错、录制性能 trace，从而真正”看见”自己写的代码在浏览器里跑成什么样。它基于 Puppeteer 驱动 Chrome，并会自动等待操作结果，让智能体的浏览器操作变得稳定可靠。
安装要求和过程
环境要求
- Node.js —— LTS 版本
- Chrome —— 当前稳定版或更新版本
- npm
快速安装
无需手动安装，直接在 MCP 客户端配置中通过 npx 拉起即可。以标准配置为例，在客户端的 MCP 配置文件中加入：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}使用 Claude Code CLI 的用户可以一行命令完成添加：
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest如果只需要基础的导航、执行脚本与截图，可以用精简 + 无头模式降低开销：
"args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]核心功能
- 性能洞察：调用 Chrome DevTools 录制性能 trace，并提取可执行的优化建议（如”检查 https://developers.chrome.com 的性能”）。
- 高级浏览器调试：分析网络请求、抓取截图、读取控制台消息，并附带经过 source map 还原的堆栈信息。
- 可靠自动化：底层由 Puppeteer 驱动，自动等待动作完成，避免因时序问题导致的操作失败。
- 丰富的工具集：涵盖输入自动化、页面导航、设备模拟、性能、网络、调试、内存、扩展等 10 大类共 50 余个工具。
- 灵活的连接方式：支持无头/有头、隔离实例、指定 Chrome 通道，还能通过
--autoConnect/--browser-url连接已经在运行的 Chrome，与人工共享登录状态。
典型使用场景
- 前端性能诊断：让 AI 助手打开你的站点自动录制性能 trace，指出 LCP、长任务、渲染阻塞等瓶颈并给出改进方案，把”性能优化”从玄学变成可量化的闭环。
- 自动化调 Bug：当页面报错或接口异常时，智能体可直接查看控制台报错和网络请求详情（含还原后的堆栈），定位问题后再改代码，减少来回复制粘贴。
- 沙箱内安全调试：在沙箱里运行 MCP，连接沙箱外带远程调试端口的 Chrome，既保证隔离又能复用真实浏览器环境，适合 Agent 产品集成浏览器能力。
推荐理由
用下来最大的感受是：它补齐了 AI 编程助手最缺的一环——“看得见运行结果”。过去让 AI 改前端，它只能凭代码想象效果；接入之后，它能真正打开页面、看到报错、量到性能数据，再回头改代码，闭环体验明显更靠谱。作为 Chrome DevTools 官方出品的项目，工具设计规范、更新及时，且用 npx 零安装接入、Apache-2.0 开源，几乎没有上手门槛。如果你已经在用 Claude Code、Cursor 或 Copilot 做前端开发，非常值得加上这一个 MCP。
下载地址
- GitHub 仓库：https://github.com/ChromeDevTools/chrome-devtools-mcp
- npm 包主页：https://www.npmjs.com/package/chrome-devtools-mcp
项目信息：ChromeDevTools 官方出品 · TypeScript 开发 · Apache-2.0 许可 · 约 46,700+ GitHub Stars。
发表回复