hermes-agent量产系统

【chrome-devtools-mcp】让AI直接操控浏览器进行自动化与调试的神器

作者提米哥

这个项目是一个基于模型上下文协议（MCP）的服务器，它让各种AI编程助手（如 Claude、Cursor、Copilot 等）能够直接控制和检查正在运行的 Chrome 浏览器。它解决了AI智能体缺乏真实浏览器交互能力的问题，为可靠的网页自动化、深层次的网络与内存调试以及性能分析提供了完整的工具支持。

主要功能与特性：

  • 获取性能洞察：能够录制浏览器追踪记录，并提取出具有实际指导意义的性能优化建议。
  • 高级浏览器调试：支持分析网络请求、截取屏幕截图，以及检查浏览器控制台消息（支持源码映射的堆栈追踪）。
  • 可靠的自动化操作：基于 Puppeteer 实现浏览器动作自动化，并能自动等待操作结果完成，确保流程稳定性。
  • 全面的工具集：提供了数十种细分工具，涵盖输入自动化（点击、拖拽、填写表单等）、导航控制、设备模拟、网络请求拦截、内存堆快照分析以及浏览器扩展管理等。
  • 灵活的运行与配置模式：支持无头模式运行、连接至已运行的浏览器实例、并发会话路由，以及仅保留基础导航和截图功能的精简模式，方便不同需求快速调用。

安装与使用示例：

运行此项目需要 Node.js LTS 版本、当前稳定版或更新的 Chrome 浏览器以及 npm。将以下配置添加到您的 MCP 客户端（如 Cursor、VS Code Copilot 等）中即可快速启动服务器：

"mcpServers": {
  "chrome-devtools": {
    "command": "npx",
    "args": ["-y", "chrome-devtools-mcp@latest"]
  }
}

配置完成后，您可以在 AI 客户端中输入提示词来测试是否生效，例如：

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

此时，AI 助手应当会自动打开浏览器并录制性能追踪。如果您只需要执行简单的浏览器任务（如截屏和导航），可以在配置的 args 数组中加入 "--slim", "--headless" 参数来启用精简且无界面的模式。

适用场景与目标用户：

这个项目非常适合需要通过 AI 进行前端界面自动化测试、实时网页性能瓶颈排查，以及深度网络请求与内存泄漏调试的开发场景。目标用户主要是使用各类 AI 编程助手（如 Claude Code、Cursor、Copilot、Windsurf 等）的开发者，以及希望将真实的浏览器操作与诊断能力无缝集成到 AI 工作流中的自动化测试工程师。

总结：

该项目作为连接 AI 智能体与 Chrome 底层能力的桥梁，极大拓展了 AI 在前端开发领域的实用性。它将复杂的 DevTools 操作封装为标准化的 MCP 协议，让 AI 能够像真实用户一样操控网页，并像专业开发者一样排查深层问题。需要注意的是，该工具默认会向 Google 发送使用统计数据以改进产品（可通过 --no-usage-statistics 参数关闭），且仅官方支持标准的 Google Chrome 及 Chrome for Testing。对于希望提升 AI 辅助测试与调试效率的开发者来说，这是一个极具实用价值的工具。

微信联系：timidamen

类似文章