ChromeDevTools/chrome-devtools-mcp —— 为编码代理提供 Chrome DevTools

## 这是什么

ChromeDevTools/chrome-devtools-mcp（简称 chrome-devtools-mcp）是一个专为 AI 编码代理设计的开源 MCP（Model-Context-Protocol）服务器。它让 Claude、Cursor、Copilot 等 AI 助手能直接控制和检查实时 Chrome 浏览器实例。通过暴露 Chrome 的浏览器内容，AI 代理可实现自动化操作、深度调试和性能分析。

项目主语言为 TypeScript，已被安装超过 44 万次，是目前 GitHub 上与 Chrome DevTools 最紧密集成的 MCP 实现。服务器支持 Google Chrome 及 Chrome for Testing 官方版本，其他 Chromium 浏览器可能运行但未经过全面验证。官方持续为最新 Extended Stable Chrome 提供修复和支持。

## 解决的问题

传统 AI 代理（如纯文本提示或有限工具）无法直接访问实时浏览器状态，自动化网页任务时易出现点击失效、表单填写错误或网络请求未捕获等问题。chrome-devtools-mcp 通过 MCP 协议将 Chrome DevTools 前端的核心能力（网络分析、截图、控制台消息、性能追踪等）直接暴露给 AI 代理，使代理能理解页面快照、UID 定位元素，并执行精确动作。同时解决代理间浏览器连接不一致的问题，并提供可靠的等待机制和源映射堆栈追踪，显著提升自动化可靠性与调试效率。

## 核心功能

• 输入自动化（10 工具）：click（带双击支持）、drag、fill、fill_form（批量填写表单）、handle_dialog、hover、press_key、type_text、upload_file、click_at（需实验性 vision 模式）。所有操作均基于页面内容快照的 UID，自动等待动作完成结果。
• 导航自动化（6 工具）：navigate_page（支持缓存忽略、自定义脚本）、new_page（隔离上下文）、select_page、wait_for（文本出现等待）、list_pages、close_page。
• 模拟与调整（2 工具）：emulate（暗/亮模式、CPU 节流、网络条件、用户代理、地理位置、额外 HTTP 头、视口调整）；resize_page。
• 性能分析（3 工具）：performance_start_trace、performance_stop_trace、performance_analyze_insight（提取可行动洞见，可选接入 CrUX 真实用户体验数据）。
• 网络调试（2 工具）：get_network_request、list_network_requests（保留重定向链）。
• 高级调试（8 工具）：evaluate_script、get_console_message、list_console_messages（带源映射堆栈）、take_screenshot、take_snapshot、screencast_start/screencast_stop、lighthouse_audit。
• 内存分析（11 工具）：take_heapsnapshot、close_heapsnapshot、compare_heapsnapshots_summary、get_heapsnapshot_summary、get_heapsnapshot_details、get_heapsnapshot_edges、get_heapsnapshot_dominators、get_heapsnapshot_retainers、get_heapsnapshot_retaining_paths、get_heapsnapshot_class_nodes、compare_heapsnapshots_class_nodes（最新版新增）。
• 扩展与第三方（7 工具）：install_extension、list_extensions、reload_extension、trigger_extension_action、uninstall_extension、execute_3p_developer_tool、list_3p_developer_tools。
• WebMCP 集成：支持执行和列出第三方 WebMCP 工具。

Slim 模式（仅限基本任务）：仅包含 navigate、evaluate、screenshot，显著降低资源占用并适合无头模式。

## 亮点 / 与同类相比

• 原生 Chrome DevTools 集成：直接使用前端源码，无需额外封装，功能完整且实时。
• AI 友好设计：工具参数均为结构化（UID、数组、枚举），易被 LLM 理解；自动等待 + 页面快照提供上下文；支持实验性 vision 模式实现坐标点击。
• 内存与性能专长：11 个内存工具（包括 retaining paths、class nodes 对比）和性能洞察功能，是其他代理框架（如纯 Puppeteer 包装）所不具备的。
• 多客户端兼容：原生支持 VS Code Copilot、Cursor、Claude Code、Gemini CLI、Antigravity 等 20+ 平台，插件包一键安装；Slim 模式专为轻量场景设计。
• 隐私与可控：仅暴露浏览器实例内容，可通过 --browser-url 连接已启动实例；数据收集（成功率、延迟、环境）可通过 --no-usage-statistics 禁用；性能工具可选禁用 CrUX。
• 与同类对比：相比单一 Puppeteer 库，此项目是 MCP 服务器而非客户端；相比其他 MCP 浏览器代理，它包含 Chrome 原生 DevTools 前端能力（Lighthouse、堆快照、screencast），同时官方维护更新速度快（最新 1.4.0 于 2026 年 6 月发布）。

## 适合谁用 / 上手

• 适合谁用：

  • Web 前端/全栈开发者：自动化 E2E 测试、跨浏览器兼容性验证、性能优化。
  • AI 代理开发者：构建或扩展浏览器代理（如 Antigravity、Claude Code）。
  • 自动化工程师：处理动态网页表单、文件上传、多页导航、扩展调试。
  • 企业级测试团队：需集成到 Cursor/Claude 等 IDE 的企业 MCP 服务器。
  • 轻量场景：仅需基础导航与截图的用户。

• 上手（最快路径）：

  1. 全局安装（推荐）：npm i -g chrome-devtools-mcp。
  2. 启动服务器：npx chrome-devtools-mcp@latest。
  3. 在 MCP 客户端配置（如 Cursor Settings → MCP → New MCP Server，或 Claude Code /plugin marketplace add ChromeDevTools/chrome-devtools-mcp）：

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

  4. 可选：启用 --slim + --headless 用于无头环境；连接已启动浏览器时使用 --browser-url=http://127.0.0.1:9222。
  5. 验证：在支持 MCP 的 IDE 中提示 AI 执行 click 等工具，即可看到页面快照与执行结果。

安装后即刻体验完整 Chrome 浏览器能力，无需额外浏览器启动或复杂配置。