6.1 从拿数据到动手操作

上一节讲了 Hermes 怎么抓取网页数据：

打开页面 → 取无障碍树快照 → LLM 读文本理解页面结构 → 定位字段 → 提取。

这是只读的。Hermes 读完数据，页面本身没有任何变化。

而这一节讲的是操作，而“操作”往往是具有“副作用“的，比如：

  • 把商品加入购物车，这会改变购物车的状态；
  • 填完表单点提交，改变了服务器的数据；发表一条评论，页面上多了一条新内容。

所谓「有副作用」，意思是 Hermes 的操作会改变页面或服务器的状态。 上面的例子，这些操作不是只读的，它们会在服务器上留下痕迹。

6.2 Hermes 操作浏览器的三种模式

在让 Hermes 操作浏览器之前，需要先理解一下它操作的原理：

Hermes 操作浏览器的底层机制，是通过 CDP 连接一个 Chromium 内核的浏览器（Chrome、Edge、Brave 都行，内核相同）。但这个浏览器和我们平常打开的不一样，它必须以调试模式启动，具体来说就是用 9222 端口。理解了这个，后面三种模式就好懂了。

注意：Safari 和 Firefox 不走 CDP，所以这套方法对它们无效。

📌什么是 CDP？

CDP（Chrome DevTools Protocol）是 Chromium 内核自带的通信协议。Chrome、Edge、Brave 这些浏览器都基于 Chromium，所以全部支持 CDP。你打开开发者工具（F12）时，里面查看 DOM、监控网络、执行 JS，全是走 CDP。Hermes 也是用同一套协议来操控浏览器，只不过不是人点 F12，而是程序自动化。Safari 和 Firefox 用的是各自的协议，不走 CDP，所以 Hermes 这套方法对它们不适用。

模式一：无头模式（headless）

无头模式就是让浏览器在后台运行，不弹出窗口。你在写代码，Hermes 在背后默默操作网页——互不干扰。

想用无头模式，直接在指令里说清楚就行：

code
用无头模式打开 https://logamee.com，截个图给我看

Hermes 收到后，底层调用 agent-browser 启动 Chromium 时就会带上 --headless 参数：

code
Hermes 收到指令
→ 调用 agent-browser（Rust CLI）
→ 启动 Chromium（带 --headless）
→ 打开网页、截图、操作
→ 任务完成后关闭浏览器
📌什么是 agent-browser？

agent-browser 是由 Vercel Labs 开发的开源 CLI 工具，纯 Rust 编写，GitHub 3 万+ Star。它通过 Chrome DevTools Protocol（CDP）操控真实的 Chrome 浏览器，让 LLM 能直接定位和操作页面元素。Hermes 在本地模式下就是通过它来启动浏览器、执行所有网页操作的。

特点： - 不弹窗口，不占桌面，不打断你手里的活 - 每次都是全新的浏览器，没有 cookies、没有登录态 - 你看不到它在做什么，出问题时不好排查

适合场景：访问不需要登录的公开页面（新闻网站、技术博客、公开数据页等），或者纯后台的自动化任务。

模式二：Agent-Browser 有头模式

这是 Hermes 的默认行为。直接让它打开网页，它会弹出一个可见的 Chrome 窗口。你能看到它在操作，也可以在这个窗口里手动登录网站。

但注意——这个 Chrome 每次都是全新的。你登了五个网站，Chrome 一关，下次全没了，得重新登。

code
打开 https://logamee.com，登录后看看上面写了什么

特点： - 弹出可见窗口，进入网站 - 每次全新 Chrome，不保留登录态

适合场景：临时性的操作，不需要反复登录的场景，或者调试时想看着它干活。

模式三：Browser Connect（推荐）

前面两种模式，Chrome 每次都是全新的——登录态不保留。如果你需要一个「登一次，用永久」的浏览器，用 /browser connect命令后更好。

code
/browser connect

第一次运行时，Hermes 会启动一个专用 Chrome（端口 9222，用户数据目录 ~/.hermes/chrome-debug）。你在这个 Chrome 里把需要用的网站全部登录一遍——京东、淘宝、公司 OA、邮箱……登完就不用再管了。

下次再用 /browser connect，Hermes 会复用同一个用户数据目录——你之前登录的所有网站，登录态全在。这个 Chrome 相当于你的「自动化专用浏览器」，和你日常上网的 Chrome 完全独立，互不干扰。就算关掉了也没关系，重开还是同一个 ~/.hermes/chrome-debug 目录，登录态不会丢失。

适合场景：需要高频使用的自动化任务（比如笔者，基本现在不再填写表单了，全是委托 Hermes 来执行）

6.3 底层技术：CDP 与浏览器自动化家族

前面反复提到 CDP，这里简单梳理一下它和几个常见工具的关系。

CDP（Chrome DevTools Protocol） 是 Chrome 自带的底层通信协议。你按 F12 打开开发者工具，里面查看 DOM、监控网络、执行 JS，全是走 CDP。它最底层、最强大，但也最难直接上手。

在这层协议之上，Google 做了 Puppeteer，微软做了 Playwright。它们把 CDP 包装成人类可用的编程 API——page.click()、page.screenshot()，大大简化了直接操作 CDP 的难度。

但是Puppeteer 只支持 Chrome，Playwright 兼容 Chrome、Firefox、Safari 浏览器三巨头，所以其实 Playwright 现在用的更多。

Hermes 用的 agent-browser（Vercel Labs 出品）也是同一层的工具，但定位不同：它不是给人写脚本用的，而是给 AI 用的。输出的是无障碍树快照（带 @e1、@e2 引用标记），让 LLM 直接读懂页面结构。

所以整条技术栈是这样：

code
  Hermes（AI 层）
  「打开网页，帮我填个表单」
         │
         v
   agent-browser（Vercel Labs）          ← 工具层
   AI 用 CLI，输出无障碍树快照
         │
         v
       CDP                                ← 协议层
  Chrome DevTools Protocol
  （F12 开发者工具用的就是它）
         │
         v
      Chrome                               ← 浏览器
📌Playwright 和 Puppeteer 呢？

两者也是工具层的，但定位不同：Puppeteer 和 agent-browser 一样只走 CDP，只支持 Chrome。Playwright 更全能，连接 Chrome 走 CDP，连接 Firefox 走 Marionette 协议，连接 Safari 走 WebDriver。所以 Playwright 能做到跨浏览器，不是因为它统一了协议，而是它内部适配了三种协议。

Hermes 选了 agent-browser 而不是 Playwright，因为 agent-browser 专为 AI 设计——输出的无障碍树快照 LLM 能直接读懂，Playwright 的 API 是给人写脚本用的。

6.4 ■ 学点英语

中文 English 音标 说明
浏览器自动化 Browser Automation /ˈbraʊzər ˌɔːtəˈmeɪʃən/ 用程序控制浏览器完成点击、输入和读取页面等操作
选择器 Selector /sɪˈlektər/ 定位网页元素的表达式
元素定位 Element Targeting /ˈelɪmənt ˈtɑːrɡətɪŋ/ 在页面中找到按钮、输入框等可操作元素
页面状态 Page State /peɪdʒ steɪt/ 当前页面加载、登录和交互后的状态