Chrome DevTools MCP：让编程 Agent 操作和诊断真实 Chrome
一分钟看懂
Chrome DevTools MCP 是 Chrome DevTools 团队为编程 Agent 提供的浏览器控制与调试工具。它以 MCP Server 的形式，把真实 Chrome 的页面操作、控制台、网络请求、截图和性能追踪能力暴露给 Claude、Cursor、Copilot 等支持 MCP 的客户端；不使用 MCP 时，也可以通过配套 CLI 调用。
相比只读取网页 HTML，它能让 Agent 真正打开页面、点击元素、观察运行后的界面，并利用 Chrome DevTools 深入定位问题。因此它尤其适合“修改前端—在浏览器验证—查看错误—继续修复”的闭环，也可用于自动化操作和性能分析。
你可以用它做什么
- 验证前端功能：打开本地或线上页面，点击、输入并检查实际交互结果。
- 排查 JavaScript 错误：读取控制台消息和带源码映射的调用栈。
- 分析网络请求：检查接口状态、响应、加载时序和失败原因。
- 检查视觉效果：截取页面或元素，辅助发现布局与样式偏差。
- 记录性能轨迹：让 DevTools 采集 Trace 并给出可操作的性能洞察。
- 执行可靠自动化：通过 Puppeteer 操作 Chrome，并自动等待动作结果。
主要能力
服务器提供页面导航、输入、点击、脚本执行、截图、控制台、网络和性能等工具。性能功能可以把实验室追踪与 CrUX 的真实用户体验数据结合；如果不希望请求 CrUX，可以通过参数关闭。只需要基础浏览器操作时，还可以启用 slim 模式减少可见工具，并配合无头 Chrome 运行。
项目支持多种 MCP 客户端配置，通常通过 npx 启动 npm 包。官方支持 Google Chrome 和 Chrome for Testing，其他 Chromium 浏览器可能可用，但不在保证范围内。
适合哪些人
- 让 AI 直接开发和验证网页的前端、全栈开发者。
- 需要分析控制台、网络与性能问题的调试场景。
- 构建基于 MCP 的浏览器 Agent 或测试工具的团队。
- 希望减少人工在编辑器和 DevTools 间来回切换的用户。
若只是抓取静态文本或调用明确 API，引入完整浏览器可能消耗更多资源，普通 HTTP 工具会更合适。
怎么开始使用
准备 Node.js LTS、npm 和较新的稳定版 Chrome，然后把官方 README 中的 MCP Server 配置加入所用客户端。默认方式通过 npx -y chrome-devtools-mcp@latest 启动。连接成功后，先让 Agent 打开一个无敏感信息的测试页并截图，再逐步使用控制台、网络和性能工具。
团队环境建议固定经过验证的版本，而不是始终跟随 latest；CI 中可以使用独立浏览器配置和无头模式，避免访问个人浏览器数据。
使用前需要知道
该服务会把所连接浏览器实例中的内容暴露给 MCP 客户端，Agent 也可能修改页面数据。不要用承载个人账号、密码、支付或内部信息的日常浏览器配置进行测试。更安全的做法是创建独立 Chrome Profile，限制站点范围，并在敏感操作前要求人工确认。
Google 默认收集工具调用成功率、延迟和环境等使用统计，可通过启动参数或环境变量退出；这套统计与 Chrome 自身遥测相互独立。性能分析还可能向 Google CrUX API 发送页面 URL，可用 --no-performance-crux 关闭。自动化结果也需要断言和人工抽查，页面能被点击不代表业务行为一定正确。