Chrome DevTools MCP
活跃简介
为编程 Agent 提供浏览器开发者工具能力的 MCP 服务器，支持网页调试、性能分析和 DOM 操作自动化。
核心特性
- 性能分析洞察 — 录制 Chrome 性能追踪并提取可操作的性能优化建议
- 高级浏览器调试 — 分析网络请求、截图、检查控制台消息及 source-mapped 堆栈跟踪
- 可靠自动化 — 基于 Puppeteer 的浏览器自动化，自动等待操作结果
- MCP 服务器 — 作为 Model Context Protocol 服务器，让 AI 编码助手控制 Chrome
- 多客户端兼容 — 支持 Claude Code、Cursor、Copilot、Cline、Codex 等主流 AI 编码工具
- 轻量 Slim 模式 — 提供精简工具集用于基本浏览器任务，减少资源占用
适用场景
💡 让 AI 编码助手自动调试网页应用的性能问题
💡 通过 MCP 协议实现浏览器操作的自动化测试
💡 利用 AI 助手分析和修复前端代码中的网络请求问题
💡 在 CI/CD 流程中集成浏览器性能基准测试
💡 让 AI 代理能够控制浏览器完成复杂的 Web 自动化任务
优势与不足
✅ 优势
- • 活跃维护，近期持续更新
- • 社区热度高（51.4k stars）
- • 开源许可证友好（Apache-2.0）
- • Issue 响应及时，积压少
快速开始
# 在 MCP 客户端配置中添加
# Claude Code:
claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
# 或在 mcpServers 配置中添加:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}