chrome-devtools-mcp 是一个让AI编程助手能够直接控制、检查和分析真实Chrome浏览器的服务器工具 | 极客的赛博空间

根据你提供的GitHub页面，chrome-devtools-mcp 是一个让AI编程助手能够直接控制、检查和分析真实Chrome浏览器的服务器工具。它遵循模型上下文协议（MCP），将Chrome开发者工具（DevTools）的全部功能开放给AI。

简单来说，它给你的AI助手装上了一双“眼睛”和“手”，让它能像开发者一样操作浏览器。

🎯 核心功能与用途

这个工具主要面向AI编程助手（如Claude、Cursor、Copilot等），让它们能自动化完成需要与网页交互的复杂任务，包括：

自动化浏览器操作：点击、填表、导航、上传文件等。
深度调试与检查：查看控制台日志、分析网络请求、获取页面快照或截图。
性能分析：录制并分析性能追踪（Performance Trace），获取Core Web Vitals等关键指标，甚至可以生成Lighthouse审计报告。

🛠️ 如何安装与配置

安装非常直接，主要有两种方式：

标准配置（通用）：在你的MCP客户端（如Claude Code、Cursor）的配置文件中添加以下内容：

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

作为插件安装（部分客户端支持）：一些客户端（如VS Code、Claude Code、Gemini CLI）支持一键安装插件，这会同时绑定MCP服务器和专用技能（Skills），使用更便捷。例如在Claude Code中，可以运行：
1
2
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

项目文档详细列出了Antigravity、Claude Code、Cursor、VS Code、Windsurf等二十多种主流AI工具的配置方法。

🧠 关键概念与工作模式

并发会话支持：默认启用了--pageIdRouting，允许多个AI会话共享一个服务器实例，并精确控制各自的标签页，适合复杂任务分解。
用户数据目录：默认会为Chrome创建一个独立的用户数据目录（如~/.cache/chrome-devtools-mcp/chrome-profile），以保持登录状态和扩展。你可以通过--isolated参数强制每次使用临时目录。
连接方式：
- 自动启动（默认）：服务器会自动启动一个新的Chrome实例。
- 连接已运行实例：使用--browser-url或--autoConnect参数连接到你手动启动的、开启了远程调试端口的Chrome，这有助于保持手动测试和AI测试间的状态一致。

⚙️ 高级配置与注意事项

Slim模式：如果只需要基础的导航、截图和脚本执行功能，可以添加--slim参数，暴露更少的工具。
隐私与数据：
- 使用统计：默认会收集工具调用成功率、延迟等匿名数据以改进服务，可以通过--no-usage-statistics关闭。
- 性能追踪：默认会将追踪URL发送到Google CrUX API以获取真实用户数据，可以通过--no-performance-crux关闭。
网络访问控制：可以使用--blockedUrlPattern和--allowedUrlPattern限制浏览器的网络访问。
风险提示：工具会向MCP客户端暴露浏览器内容，请勿在涉及敏感或个人信息时使用。

💎 总结

chrome-devtools-mcp 是一个强大的“浏览器自动化”基础设施，它极大拓展了AI编程助手的能力边界，使其从单纯的代码生成，迈向了能够实际操作、测试和分析Web应用的领域。对于希望构建能自动执行端到端Web测试、或进行复杂UI自动化任务的开发者来说，这是一个非常核心且官方的工具。

如果你在使用特定AI工具（如Claude Code或Cursor）时遇到配置问题，可以参考项目中针对该工具的详细说明。