🔥 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 从”代码生成器”进化成了”全栈开发助手”，值得每个前端/全栈工程师尝试。🌟
📦 下载地址
License: Apache-2.0 | 开发语言: TypeScript | 维护方: Google Chrome DevTools Team