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 需要操作没有标准“接口”的软件，或需要像人一样“看懂”界面时，截图定位技术就派上了用场。其核心是“截图 → 理解 → 操作”的循环。
- 截图采集：通过系统 API 或 CDP 截取屏幕或浏览器区域，并编码为 Base64 图像。
- 视觉理解：将截图输入视觉语言模型（VLM）进行分析，识别界面元素（按钮、输入框等）、文字和布局。例如，微软的 OmniParser 和字节跳动的 UI-TARS 都属此类。
cv_grounding这类工具则可将截图直接转化为结构化的 UI 元素信息。 - 操作决策与执行：模型根据理解，输出坐标级的操作指令，如
click(x=450, y=320)。系统随后模拟鼠标或键盘执行这些操作。
优势：通用性强（能操控任何老旧 GUI 软件）、所见即所得（能发现视觉层问题）、门槛低（自然语言指令即可）。
• 瓶颈：
◦ 速度慢：完成“打开微信给爸爸打电话”耗时近 3 分钟（手动半分钟）。
◦ 精度受限：对长宽比极端的截图（如超宽屏）点击精度下降，且截图会包含鼠标指针，偶尔遮挡信息。
◦ 占用桌面：Windows 版暂时无法后台静默运行。
双剑合璧：从“看懂”到“操作”
在实际的 AI Agent 中，这两种技术常常是协同工作的。一个典型的AI 浏览器自动化流程可能是这样的：
- AI Agent 通过CDP控制浏览器，比如导航到目标网页。
- 通过CDP 的
Page.captureScreenshot命令截取当前页面。 - 将截图发送给视觉模型进行分析，模型返回“登录按钮”的坐标。
- Agent 将这些坐标转换为CDP 的
Input.dispatchMouseEvent命令，在浏览器上执行点击。 - 循环以上步骤，直到任务完成。
像browser-use、native-devtools-mcp等工具，就是将 CDP 的底层控制与 AI 的视觉理解能力封装在了一起。
总的来说，CDP 提供了精确控制浏览器的底层能力，而截图定位则赋予了 AI 理解界面的智能，两者的结合，构成了目前 AI 操作电脑和浏览器的技术基石。
适用场景总结
| 技术 | 最佳适用场景 | 应避免的场景 |
|---|---|---|
| CDP |
|
|
| 截图定位 |
|
|
| 二者结合 |
| |
结论：没有一种技术是万能的。CDP 在速度、精度和稳定性上优势明显，但受限于浏览器生态。截图定位牺牲了速度和部分精度，换来了无与伦比的通用性。在实际的 AI 操作电脑/浏览器系统中，根据任务类型和环境约束，灵活选用或组合这两种技术，才能达到最佳效果。
