AI 操作电脑与浏览器的核心技术：CDP 与截图定位

AI 操作电脑和浏览器最核心的两项技术：CDP 与截图定位

简单来说，CDP 是让 AI 与浏览器“对话”的官方语言，而截图定位则是让 AI“看懂”屏幕并采取行动的“眼睛”和“手”。

CDP：AI 与浏览器的“官方语言”

CDP（Chrome DevTools Protocol）是让外部工具与基于 Chromium 的浏览器（如 Chrome、Edge）进行通信和控制的协议。它就像浏览器的一个“远程控制接口”。

• 工作原理：外部程序（如 AI Agent）通过WebSocket连接到浏览器，并发送/接收JSON格式的指令和数据。Puppeteer、Playwright 等知名自动化库，其底层都是通过 CDP 与浏览器交互的。
• 核心能力：CDP 将浏览器的能力划分为 60 多个域（Domain），每个域都提供了一套特定的命令。关键的域包括：
  • Page: 控制页面导航、截图、生成 PDF 等。
  • DOM: 查询和修改页面的文档结构。
  • Network: 监听和控制网络请求。
  • Input: 模拟鼠标、键盘等输入事件。
  • Runtime: 在页面上下文中执行 JavaScript 代码。
• 应用实践：使用 CDP 时，流程通常是启动带调试端口的浏览器，通过 HTTP 接口获取可调试的页面列表，然后建立 WebSocket 连接发送 CDP 命令。例如，通过DOM.querySelector命令获取元素并模拟点击。

截图定位：AI 的“视觉”与“行动”

当 AI 需要操作没有标准“接口”的软件，或需要像人一样“看懂”界面时，截图定位技术就派上了用场。其核心是“截图 → 理解 → 操作”的循环。

1. 截图采集：通过系统 API 或 CDP 截取屏幕或浏览器区域，并编码为 Base64 图像。
2. 视觉理解：将截图输入视觉语言模型（VLM）进行分析，识别界面元素（按钮、输入框等）、文字和布局。例如，微软的 OmniParser 和字节跳动的 UI-TARS 都属此类。cv_grounding这类工具则可将截图直接转化为结构化的 UI 元素信息。
3. 操作决策与执行：模型根据理解，输出坐标级的操作指令，如click(x=450, y=320)。系统随后模拟鼠标或键盘执行这些操作。

优势：通用性强（能操控任何老旧 GUI 软件）、所见即所得（能发现视觉层问题）、门槛低（自然语言指令即可）。
• 瓶颈：
◦ 速度慢：完成“打开微信给爸爸打电话”耗时近 3 分钟（手动半分钟）。
◦ 精度受限：对长宽比极端的截图（如超宽屏）点击精度下降，且截图会包含鼠标指针，偶尔遮挡信息。
◦ 占用桌面：Windows 版暂时无法后台静默运行。

双剑合璧：从“看懂”到“操作”

在实际的 AI Agent 中，这两种技术常常是协同工作的。一个典型的AI 浏览器自动化流程可能是这样的：

1. AI Agent 通过CDP控制浏览器，比如导航到目标网页。
2. 通过CDP 的Page.captureScreenshot命令截取当前页面。
3. 将截图发送给视觉模型进行分析，模型返回“登录按钮”的坐标。
4. Agent 将这些坐标转换为CDP 的Input.dispatchMouseEvent命令，在浏览器上执行点击。
5. 循环以上步骤，直到任务完成。

像browser-use、native-devtools-mcp等工具，就是将 CDP 的底层控制与 AI 的视觉理解能力封装在了一起。

总的来说，CDP 提供了精确控制浏览器的底层能力，而截图定位则赋予了 AI 理解界面的智能，两者的结合，构成了目前 AI 操作电脑和浏览器的技术基石。

适用场景总结

结论：没有一种技术是万能的。CDP 在速度、精度和稳定性上优势明显，但受限于浏览器生态。截图定位牺牲了速度和部分精度，换来了无与伦比的通用性。在实际的 AI 操作电脑/浏览器系统中，根据任务类型和环境约束，灵活选用或组合这两种技术，才能达到最佳效果。