最后更新：2026 年 3 月 · 源码：chrome-devtools-mcp
Web 自动化操作器
一个将 Chrome DevTools 协议暴露给 AI 智能体的 MCP 服务器——在任何兼容 MCP 的客户端中实现可靠的浏览器自动化、网络检查、控制台调试、截图捕获和性能追踪。
是什么
chrome-devtools-mcp 作为 MCP 服务器启动并连接到 Chrome 浏览器实例。它提供跨 6 个类别的 26 个工具，AI 智能体可调用这些工具与实时浏览器交互：点击元素、填写表单、导航页面、读取控制台输出、捕获性能追踪等。自动化底层使用 Puppeteer 在每次操作后等待页面状态。
隐私说明
此服务器将浏览器内容暴露给 MCP 客户端。性能工具可能会将追踪 URL 发送到 Google CrUX API 以获取真实用户字段数据。使用统计数据默认会被收集；两者均可通过服务器标志禁用。
为什么
AI 智能体的浏览器自动化有两种常见失败模式。Selenium 和 Playwright 专为确定性测试脚本设计：你事先知道要点击哪个元素以及顺序。AI 智能体需要观察、推理和适应——它事先不了解 DOM 结构，必须动态发现。纯截图方法通过让智能体"看到"页面来解决这个问题，但截图无法给出精确的元素引用，也无法将意图表达为工具调用。
Chrome DevTools 协议（CDP）暴露了开发者在 DevTools 中使用的相同原语：无障碍树、JavaScript 执行、网络流量、控制台输出和性能追踪。使用 CDP 的智能体可以精确检查页面结构，通过无障碍角色识别元素，执行任意 JavaScript，并读取浏览器记录的精确内容——所有这些都通过单一的 MCP 接口完成。
架构
三个层次协作处理单个智能体工具调用：
智能体
→ MCP 工具调用（如 click、fill、navigate_page）
→ chrome-devtools-mcp 服务器
→ Puppeteer（Chrome 管理 + 等待操作结果）
→ Chrome DevTools 协议（浏览器控制）
→ Chrome 实例 跨 6 个类别的 26 个工具：
输入自动化（8 个工具）
| 工具 | 说明 |
|---|---|
| click | 通过 uid 点击元素（单击或双击） |
| drag | 将一个元素拖到另一个元素上 |
| fill | 在输入框中输入文本或选择选项 |
| fill_form | 一次调用填写多个表单元素 |
| handle_dialog | 接受或关闭浏览器对话框 |
| hover | 悬停在元素上 |
| press_key | 按下键或组合键 |
| upload_file | 通过文件输入元素上传本地文件 |
导航（6 个工具）
| 工具 | 说明 |
|---|---|
| navigate_page | 导航到 URL |
| new_page | 打开新浏览器标签页 |
| close_page | 通过页面 ID 关闭标签页 |
| list_pages | 列出所有打开的标签页 |
| select_page | 通过页面 ID 切换焦点到标签页 |
| wait_for | 在继续之前等待条件满足 |
调试（5 个工具）
| 工具 | 说明 |
|---|---|
| take_screenshot | 捕获当前页面的截图 |
| take_snapshot | 捕获页面无障碍树快照（返回元素 UID） |
| evaluate_script | 在页面上下文中执行 JavaScript |
| get_console_message | 获取带有源映射堆栈追踪的特定控制台消息 |
| list_console_messages | 列出当前页面的所有控制台消息 |
网络（2）、性能（3）、模拟（2）
| 工具 | 说明 |
|---|---|
| list_network_requests | 列出页面发出的所有网络请求 |
| get_network_request | 获取特定请求的详细信息，包括请求头和正文 |
| performance_start_trace | 启动 DevTools 性能追踪 |
| performance_stop_trace | 停止追踪并返回原始数据 |
| performance_analyze_insight | 从追踪中提取可操作的洞察（可选包含 CrUX 字段数据） |
| emulate | 模拟设备（移动端、平板等） |
| resize_page | 调整浏览器视口大小 |
关键设计决策
无障碍树 UID——先快照，再操作
与元素交互的工具接受 uid 参数。UID 来自 take_snapshot 返回的无障碍树。智能体总是先调用 take_snapshot 获取当前 UID，然后将目标 UID 传递给操作工具。这避免了在 DOM 变更时失效的脆弱 CSS 选择器和 XPath 表达式。
Puppeteer 等待操作结果——无需轮询循环
每次交互（点击、填写、导航）后，Puppeteer 会等待页面稳定后再将控制权返回给智能体。智能体不需要显式轮询页面是否就绪。这消除了一类常见的时序错误——智能体在 JavaScript 完成更新之前就对页面采取行动。
CDP 优于 Selenium/Playwright
CDP 提供比 Playwright 更低级的访问。智能体可以读取带有源映射堆栈追踪的控制台消息、拦截网络请求、执行任意 JavaScript，并记录 DevTools 级别的性能追踪——这些都无法通过 Playwright 的抽象层轻松访问。
托管 Chrome 与连接到现有实例
默认情况下，服务器使用专用配置文件启动自己的 Chrome。对于智能体需要维护会话状态（已登录账户）或与手动测试协同工作的情况，它可以连接到已启用远程调试的现有 Chrome 实例。
如何自行构建
1. 快照-然后-操作模式是基础
每个交互序列都从新快照开始。UID 是特定于页面状态的；导航或 DOM 变更后，来自先前快照的 UID 可能已过期。在操作之前总是先快照，尤其是在任何导航或表单提交之后。
2. 为每次交互实现等待操作结果
只有在页面稳定后才从工具调用返回——而不是在 DOM 事件触发后立即返回。Puppeteer 的 waitForNavigation 和 waitForSelector 是正确的原语。没有这个，智能体会在页面过渡中操作，得到不一致的结果。
3. 使用无障碍树操作元素，使用截图进行视觉验证
无障碍树提供精确的元素引用（角色、名称、状态、uid）。截图提供视觉上下文——对智能体验证页面外观是否正确很有用。两者结合使用：快照用于操作，截图用于确认视觉结果看起来正确。
4. 处理敏感站点时隔离用户数据
CDP 将浏览器会话的完整内容暴露给 MCP 客户端。如果智能体正在浏览已认证页面或处理凭据，请使用隔离模式（会话后清理的临时用户数据目录）以防止任务之间的交叉污染。
5. 结合实验室追踪与 CrUX 字段数据进行性能分析
单次实验室追踪显示一个用户的体验。CrUX 字段数据显示真实用户的百分位分布。performance_analyze_insight 工具在 URL 公开可访问时结合两者，为智能体提供更完整的实际用户体验与实验室条件对比。
常见问题
服务器启动前需要 Chrome 已在运行吗？
不需要。默认情况下，当第一次调用需要浏览器的工具时，服务器通过 Puppeteer 启动自己管理的 Chrome 实例。Chrome 不会在服务器启动时启动——只有在实际需要时才启动。
工具如何识别页面元素？
与元素交互的工具（click、fill、hover）接受 uid 参数。UID 来自 take_snapshot 返回的页面快照。智能体调用 take_snapshot，通过 uid 识别目标元素，然后将该 uid 传递给操作工具。
什么是 CrUX API，它何时向外部发送数据？
Chrome 用户体验报告（CrUX）API 为公开 URL 提供真实用户性能字段数据。它由 performance_analyze_insight 与实验室追踪数据一起使用。可以通过服务器标志禁用，以防止任何 URL 被发送到 Google 的 API。
Authors: Qiushi Wu & Orange 🍊