### [【开源推荐】chrome-devtools-mcp：43.5K+ Stars！Google官方出品，让AI编程助手直接操控Chrome浏览器](https://www.willai.cc/article/1687)

**Published:** 2026-06-12T19:06:22

**Author:** hiyoho

**Excerpt:** 🔥 GitHub 热门 AI 开源项目 chrome-devtools-mcp 43.5K+ Stars · Google Chrome 官方团队出品 · MCP 协议 · 浏览器自动化 📌 项目简介 chrome-devtools-mcp

🔥 GitHub 热门 AI 开源项目

# chrome-devtools-mcp

43.5K+ Stars · Google Chrome 官方团队出品 · MCP 协议 · 浏览器自动化

## 📌 项目简介

**chrome-devtools-mcp** 是 Google Chrome DevTools 团队官方开源的 **MCP（Model Context Protocol）服务器**，它将 Chrome 浏览器的完整调试能力通过标准化协议暴露给 AI 编程助手。借助它，Claude Code、Cursor、Copilot、Antigravity 等 AI 工具可以直接控制浏览器、抓取性能数据、执行自动化测试，真正实现”AI 懂浏览器”。

## ⚙️ 安装要求与过程

环境要求

-   Node.js LTS 长期支持版
-   Google Chrome 稳定版或更新版本
-   npm 包管理工具

快速安装（4步搞定）

\# 1. 在 MCP 客户端配置中添加（以 Claude Code 为例）

claude mcp add chrome-devtools –scope user \\

  npx chrome-devtools-mcp@latest

\# 2. 或者直接在 MCP 配置 JSON 中添加

{

  “mcpServers”: {

    “chrome-devtools”: {

      “command”: “npx”,

      “args”: \[“-y”, “chrome-devtools-mcp@latest”\]

    }

  }

\# 3. 无头模式 + 精简模式（仅3个核心工具）

args: \[“-y”, “chrome-devtools-mcp@latest”, “–slim”, “–headless”\]

\# 4. 验证安装

在 AI 客户端中输入：

“Check the performance of https://developers.chrome.com”

## ✨ 核心功能

🔧 完整的浏览器自动化

基于 Puppeteer 实现，支持点击、拖拽、表单填充、文件上传、弹窗处理等 10 类输入自动化操作，且自动等待操作结果，避免时序问题。

📊 性能分析 & Lighthouse 审计

录制 Chrome 性能追踪（trace），提取可落地的性能优化建议；集成 Lighthouse，一键完成 PWA、SEO、可访问性审计。

🐛 深度调试能力

查看网络请求详情、截取页面截图、获取控制台消息（支持源码映射栈追踪）、获取堆内存快照，调试能力媲美手动打开 DevTools。

🔌 多客户端支持

原生支持 Claude Code、VS Code Copilot、Cursor、Antigravity、Gemini CLI、Windsurf 等所有主流 AI 编程工具，配置即用。

🛠️ 48+ 工具全覆盖

提供输入自动化、导航、设备模拟、性能分析、网络调试、内存调试、Chrome 扩展操作等 6 大类 48 个工具，满足各类浏览器自动化需求。

## 🚀 典型使用场景

场景一：AI 辅助前端性能优化

让 Claude Code 打开你的前端项目页面，自动录制性能追踪，分析长任务、布局抖动、网络瀑布流，并给出针对性的优化建议。整个过程无需手动操作 DevTools。

场景二：E2E 自动化测试生成

告诉 AI 助手”帮我测试登录流程”，它会自动操控浏览器完成用户名输入、密码填写、按钮点击，并验证跳转结果。比传统 E2E 测试框架更灵活，用例用自然语言描述即可。

场景三：Web 截图 & 视觉回归

需要批量截取页面截图？AI 助手可以自动控制浏览器遍历页面，截图并对比基线图片，快速发现视觉回归问题。配合 CI/CD 流水线，实现全自动视觉测试。

## 💡 推荐理由

chrome-devtools-mcp 最大的价值在于**打通了 AI 与现实浏览器之间的最后一公里**。以前 AI 编程助手只能改代码，改完还需要开发者手动打开浏览器验证；现在 AI 可以自己打开页面、重现 Bug、截取证据、甚至给出修复后的验证结果。

作为 Google Chrome 团队官方出品的项目，它的可靠性和迭代速度都有保障。特别是 **–slim 精简模式**的设计非常贴心——如果你只需要基础的页面导航和截图，3 个工具就够用，不会让 AI 的上下文被大量工具描述占据。

对于 daily 使用 AI 编程工具的开发者，这个项目几乎是一个”必装”的 MCP 服务器。它让 AI 从”代码生成器”进化成了”全栈开发助手”，值得每个前端/全栈工程师尝试。🌟

## 📦 下载地址

[🔗 GitHub 仓库](https://github.com/ChromeDevTools/chrome-devtools-mcp)  
[📦 npm 包](https://www.npmjs.com/package/chrome-devtools-mcp)  
[📖 工具文档](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md)

License: Apache-2.0 | 开发语言: TypeScript | 维护方: Google Chrome DevTools Team

**Tags:** AI, AI Agent, chrome-devtools-mcp, GitHub, Google Chrome, MCP, MCP服务器, 人工智能, 前端工具, 开源

**Categories:** 开源项目

---