ChromeDevTools/chrome-devtools-mcp

它是什么

Chrome DevTools MCP 是 Google 官方推出的 Model Context Protocol 服务器，将 Chrome DevTools 的调试能力封装为标准化工具接口，让 AI 编码代理（如 Claude、Copilot）能直接驱动浏览器进行调试、性能分析和 DOM 检查。

核心亮点

• 原生集成：基于 Puppeteer 实现，提供与 DevTools 协议完全一致的调试能力
• 双向交互：支持 AI 主动操作页面，也能接收控制台日志和网络请求事件
• 零配置接入：通过 MCP 标准协议，一行命令即可让主流 AI 工具获得浏览器控制权

为什么火

5 万+ Star 印证了市场对 AI 自主调试的强烈需求。它解决了编码代理“看不见”运行结果的痛点——AI 不再盲写代码，而是能实时观察页面表现、捕获报错并迭代修复，极大提升了 Agent 处理前端问题的可靠性。

适合谁用

• 使用 AI 编程助手进行前端开发，希望 Agent 能自主验证页面行为的开发者
• 构建自动化测试或网页监控工具，需要浏览器级调试能力的团队
• 研究 MCP 生态，探索 AI 与浏览器深度集成的技术爱好者

快速上手

# 安装并启动 MCP 服务器
npx chrome-devtools-mcp@latest

# 在 Claude Desktop 或 Cursor 中配置 MCP 端点
# 添加配置：chrome-devtools://mcp

启动后，AI 即可通过标准 MCP 协议执行 navigate、evaluate、captureSnapshot 等操作，实现“写代码-跑页面-看结果-改代码”的闭环工作流。