AI Agent浏览器操作 01：无头浏览器与CDP协议——AI是怎么"打开网页"的

你有没有遇到过这种情况——

让AI帮忙查一下某个网站的数据，它却回复你说"无法访问网络"。

AI明明能写代码、能画图、能做分析，偏偏就是"上不了网"。这听起来像个bug，但其实是个架构问题。

今天，我们从最底层开始，拆开AI上网的第一步：无头浏览器。

说明

：以下命令整理自 agent-browser 文档，源码中未经实测验证：

fillwaitwait-forextractcontentrefreshlist-tabsswitch-tab

open-new-tabchatcookiessessionconnectkillsetstealthhoverselect

源码中实测可用的命令：openclicksnapshotscreenshotclosescrollbackevaltypepressconsoleerrors

无头浏览器：没有脸的Chrome

什么是"无头"？

你电脑上的Chrome，打开后是这样的：地址栏、标签页、滚动条、按钮——一个完整的图形界面。

但如果把这套界面拿掉，只保留浏览器解析网页、执行JavaScript、发送网络请求的能力，剩下的那一半叫什么？

答案就是无头浏览器（Headless Browser）。

"Headless"这个词源自服务器领域的"headless server"——没有显示器、没有键盘鼠标的服务器。同理，无头浏览器就是能干活但不露脸的浏览器。

类比一下：无头浏览器就像一个"隐身快递员"，它有手有脚（能访问网页、能提交表单），但没有脸（没有图形界面）。它在你看不见的地方完成任务，然后把结果告诉你。

怎么启动一个无头浏览器？

最简单的方式——如果你的电脑上装了Chrome，直接在终端敲一行命令：

chrome --headless --disable-gpu --no-sandbox https://example.com

这就是在以无头模式打开Chrome，访问 https://example.com。没有窗口，没有界面，一切在后台发生。

无头浏览器能做什么？

很多人以为无头浏览器只是个"爬虫"，功能很局限。其实它能干的事情远比爬虫多：

换句话说：浏览器能做的任何事情，无头浏览器理论上都能做。只是没有界面，操作通过代码完成。

Chrome DevTools Protocol：Chrome的遥控器

CDP是什么？

当你用无头浏览器打开一个网页，这个浏览器怎么接收指令？

答案是：Chrome DevTools Protocol，简称CDP。

CDP是Chrome内置的调试协议。它的设计初衷是给开发者用的——当你打开Chrome开发者工具（F12），按"Elements"查看DOM、按"Network"查看网络请求，背后就是CDP在通信。

CDP通过网络协议（WebSocket）与Chrome通信，外部程序可以发送指令，Chrome接收后执行并返回结果。

这就好比：

●Chrome是一个机器人

●CDP是它的遥控器

●你的代码就是拿着遥控器的人

CDP能做什么？

CDP本质上是一个双向通信协议，支持两大类功能：

诊断命令：获取浏览器内部信息

●获取页面性能数据

●追踪网络请求

●分析JavaScript错误

控制命令：操作浏览器执行动作

●导航到指定网址

●点击、填表、滚动

●截屏

●读写Cookie

CDP与WebDriver的关系

如果你了解浏览器自动化，可能还听过WebDriver这个协议。

WebDriver是W3C制定的浏览器自动化标准，是一个跨浏览器的通用接口。Selenium等框架底层通过WebDriver与浏览器通信。

而CDP是Chrome独有的协议，功能比WebDriver更丰富。

简单理解：

●WebDriver = 通用遥控器（所有品牌都能用，但功能有限）

●CDP = Chrome专属遥控器（只有Chrome能用，但功能更强大）

框架通过 CDP 协议与浏览器通信——但需要注意，"走 CDP 协议"不是说框架直接暴露 CDP JSON-RPC，而是框架的 API 调用最终会映射到 CDP 操作。Playwright 有自己的 Protocol 层，agent-browser 也一样，CDP 是它们的共同底层。

无头浏览器的核心能力详解

1. 页面导航：打开网页只是开始

"打开网页"这件事，在浏览器里分很多步：

输入URL → DNS解析 → 建立连接 → 发送请求 → 接收HTML → 解析DOM → 执行JS → 渲染完成

无头浏览器打开网页的流程是一样的，只是没有可视化渲染。导航完成后，无头浏览器能拿到完整的DOM结构、页面内容、和所有网络请求记录。

2. 内容抓取：不只是HTML

获取页面内容，最基础的是获取完整HTML。但更常用的是：

截图：生成页面快照，AI可以通过图片理解页面当前状态

DOM元素抓取：精确提取页面中某个区域的内容

Accessibility树：专门为辅助功能设计的页面结构，对AI理解页面语义特别有用

3. 网络拦截：看清网站的底牌

很多网站的"数据"其实不是从HTML里返回的，而是通过JavaScript在页面加载后单独请求API获取的。无头浏览器的网络拦截能力可以捕捉到这些请求。

更强大的用法：修改或伪造响应。比如网站调用了一个API，我们可以用本地mock数据替代，测试前端逻辑。

4. JavaScript注入：直接操作页面

有时候需要在页面里直接执行JavaScript，比如操作一个只有通过JS才能触发的组件，或者读取某些只有JS运行时才有的数据。

快速理解三个关键概念

在深入之前，有三个概念需要先理清楚，它们贯穿整个系列：

┌────────────────────────────────────────────────────────────────┐│  无头浏览器（Headless Browser）                                  ││  没有图形界面的Chrome，能执行所有浏览器能力                       ││  回答："用什么工具上网？"                                        │└────────────────────────────────────────────────────────────────┘                              │                              ▼┌────────────────────────────────────────────────────────────────┐│  CDP协议（Chrome DevTools Protocol）                            ││  Chrome的遥控器，通过WebSocket与浏览器双向通信                   ││  回答："怎么命令浏览器做事？"                                    │└────────────────────────────────────────────────────────────────┘                              │                              ▼┌────────────────────────────────────────────────────────────────┐│  浏览器自动化框架（Playwright / agent-browser）                  ││  封装了CDP的高级API，让我们不用写原始的JSON-RPC                  ││  回答："用什么代码控制浏览器？"                                  │└────────────────────────────────────────────────────────────────┘

三者关系：框架通过CDP协议控制无头浏览器。选哪个框架，底层都是同一个CDP协议。

框架演进：2024年之前 vs 2025年之后

2024年之前的主流方案

2017-2024年间，浏览器自动化领域的主流是Puppeteer（Google出品，2017年，90.4k stars）和Playwright（微软出品，2020年，90.3k stars）。

这两个框架设计目标是通用的浏览器自动化——写测试脚本、做爬虫、做数据抓取。它们的API是给人类程序员用的，特点是：

●API复杂、功能多、学习曲线陡

●需要自己处理云端部署、CDP连接管理

●没有内置AI Agent的感知→规划→执行闭环

对于人类程序员来说这没问题，但AI Agent调用时有两个显著问题：

1API太重：AI需要理解几十种API语义才能正确调用

2没有任务规划：Playwright只执行动作，不理解任务；AI需要自己设计感知→规划的循环

2025年的新方案：agent-browser

2025年，Vercel Labs 推出了agent-browser（GitHub 35.3k stars，Apache-2.0 协议，当前版本 v0.27.1），一个专门为AI Agent设计的浏览器控制工具。

设计上完全不同：

●CLI优先：一个命令做一件事，适合AI调用

●云端原生：内置对主流云端浏览器服务的支持（Browserless、Browserbase、BrowserUse等）

●感知结果结构化：snapshot命令返回的不只是HTML，而是带ref ID的结构化元素列表，AI可以直接引用

●会话持久化：内置profile机制，Cookie和登录态可以跨会话复用

┌─────────────────────────────────────────────────────────────────┐│  Playwright / Puppeteer（2017-2024）                            ││  目标：人类程序员的浏览器自动化工具                                ││  API：复杂、完整、需要理解浏览器内部概念                           ││  适用：测试脚本、数据爬取、复杂自动化                              │└─────────────────────────────────────────────────────────────────┘┌─────────────────────────────────────────────────────────────────┐│  agent-browser（2025+）                                          ││  目标：AI Agent的浏览器控制工具                                   ││  API：简单、命令式、AI可直接调用                                   ││  适用：云端AI Agent、任务规划框架、通用网页操作                    │└─────────────────────────────────────────────────────────────────┘

这个差异在实操中非常重要：Playwright是给人用的，agent-browser是给AI用的。

下一步预告

今天我们搞懂了三个核心概念：无头浏览器是什么、CDP协议怎么工作、以及为什么2025年出现了新的框架。

下一篇文章，我们做一个横向对比——Playwright vs agent-browser，帮助你在实际项目中做出选择。

路线选型之后，才是真正的实操。

相关笔记

●[[02-Playwright_vs_agent-browser对比选型]] — 两条路线，选哪条

●[[03-agent-browser快速上手]] — 选定路线后的第一篇实操