实战对比：Hermes Agent内置浏览器 vs browser-harness vs Chrome DevTools MCP

在上一篇文章中，我们对三款浏览器自动化工具做了概览式对比。本文将基于真实的WordPress后台发文实战，详细记录每种工具的实际使用过程、遇到的问题和最终效果，让读者直观感受它们的差异。

一、任务背景

目标任务：在已登录的WordPress后台（kkxmy.com）写一篇文章并发布。同时要求对比三种浏览器自动化工具的真实体验。运行环境：Windows 10，v2rayN代理（SOCKS5/HTTP混合监听端口10808，出口日本东京），Chrome 150，Hermes Agent v0.18.2。

二、Hermes Agent 内置浏览器（Playwright驱动）

2.1 工作原理

Hermes内置浏览器基于Playwright驱动，在Hermes进程内管理浏览器生命周期。提供browser_navigate、browser_click、browser_type、browser_snapshot、browser_vision等工具，通过ref ID定位元素，对话流中直接调用。

2.2 实战过程

第一步，尝试用browser_navigate访问Chrome开发者博客文章（developer.chrome.com）。结果：操作超时失败。原因：Hermes内置浏览器没有配置代理，而developer.chrome.com需要科学上网才能访问。这是内置浏览器的第一个限制——代理配置需要通过HTTP_PROXY/HTTPS_PROXY环境变量，且不支持SOCKS5代理。

第二步，尝试用browser_navigate访问WordPress后台。结果：同样超时。虽然WordPress后台本身不需要代理，但内置浏览器可能在没有代理的环境下初始化缓慢。

2.3 优点

• 集成度最高，对话流中直接调用，无需切换工具
• browser_snapshot提供文字快照+ref ID，元素定位稳定直观
• browser_vision内置视觉分析，可以截图并理解页面内容
• browser_type/browser_click配合ref ID，表单交互简洁
• browser_dialog原生处理alert/confirm/prompt对话框

2.4 缺点

• 代理支持有限：仅支持HTTP代理，不支持SOCKS5
• 不复用用户Chrome会话：每次启动独立实例，无登录态
• 无法访问DevTools面板数据：不支持网络请求监控、性能分析等
• 无录制回放功能

2.5 适用场景

适合不需要代理的日常网页交互、信息提取、简单表单填写。如果目标网站无需登录或可以通过API认证，内置浏览器是最便捷的选择。

三、browser-harness（CDP直连）

3.1 工作原理

browser-harness是browser-use团队推出的CDP直连工具，通过独立daemon进程连接Chrome的DevTools Protocol。安装方式：uv tool install –python 3.12 –upgrade –force browser-harness。连接方式：支持连接带–remote-debugging-port的Chrome实例，也支持Chrome 144+的autoConnect机制（需在chrome://inspect/#remote-debugging启用）。

3.2 安装踩坑

安装过程遇到两个问题。第一个是Python版本：browser-harness要求Python 3.12，系统PATH中的Python是3.11.8。uv tool install –python 3.12可以自动下载Python 3.12.13并创建独立环境，但下载需要通过代理。第二个是代理协议：uv下载Python时用HTTP代理(10809)失败了，因为这个端口实际没有监听。v2rayN的本地混合监听端口是10808，同时支持SOCKS5和HTTP。改用ALL_PROXY=socks5h://127.0.0.1:10808后下载成功。

另一个关键发现：browser-harness需要PATH中包含~/.local/bin，否则找不到browser-harness命令。uv tool install会提示但不自动添加PATH。

3.3 Chrome连接

尝试了两种连接方式。方式一：用–remote-debugging-port=9222启动独立Chrome实例，配合BU_CDP_URL=http://127.0.0.1:9222连接。这种方式稳定可靠，但需要独立的user-data-dir，意味着没有登录态。方式二：Chrome 150已启用chrome://inspect/#remote-debugging，browser-harness可以直接连接主Chrome（无需调试端口），复用用户登录态。doctor检查显示daemon alive、1个活跃连接。

注意：如果用方式一，必须先taskkill所有Chrome进程，否则新实例不会开启调试端口（Chrome的限制：已有实例运行时新实例不会开调试端口）。

3.4 WordPress发文实战

用独立Chrome实例（带代理）打开WordPress后台，手动登录后开始操作。核心步骤如下：

第一步，导航到写文章页面：new_tab(“https://www.kkxmy.com/wp-admin/post-new.php”)，成功进入Gutenberg编辑器。

第二步，设置标题：通过js()找到.editor-post-title__input元素，设置textContent并触发input事件。成功。

第三步，填写正文内容——这是最曲折的部分。尝试了三种方法全部失败：

• 方法A：Gutenberg data API的createBlock + insertBlock。报错TypeError: e is not iterable，WordPress 6.7的block-editor.min.js有兼容性问题。
• 方法B：replaceBlocks一次性替换所有块。同样的TypeError。
• 方法C：在heredoc Python中循环insertBlock。第一个块就报错，同样是block-editor的byClientId函数内部迭代失败。

第四步，转用WordPress REST API。通过CDP的Network.getCookies获取登录cookie，通过js()获取wpApiSettings.nonce，然后用curl调用POST /wp-json/wp/v2/posts创建草稿，再用PATCH更新状态为publish。文章成功发布。

这个过程中，browser-harness展现了最大的灵活性：当UI操作走不通时，可以无缝切换到CDP获取cookie+API调用的方式。这是Playwright内置浏览器和MCP工具都难以做到的。

3.5 DevTools面板能力演示

文章发布后，用browser-harness的持久CDP连接演示了Chrome DevTools面板级能力：

• 性能面板（Performance.getMetrics）：获取JSHeapUsedSize 27.86MB、Nodes 2199、JSEventListeners 845、ScriptDuration 0.142s等运行时指标
• 网络面板（Performance API）：Core Web Vitals包括TTFB 2153ms、FCP 2.620s、DOM加载2.420s、传输大小147.3KB
• 元素面板（DOM分析）：总DOM节点1182、脚本195个、样式表12个、H2标题6个
• 堆快照（Runtime.getHeapUsage）：已用堆内存27.89MB
• 网络请求列表：136个请求、总传输182.9KB，按类型分类统计

3.6 优点

• CDP直连，底层控制力最强，可调用任意DevTools Protocol方法
• 复用用户Chrome登录态（autoConnect方式），无需重新登录
• 灵活性极高：UI操作走不通时可无缝切换到CDP+API方式
• 支持Chrome启动时–proxy-server参数，完美支持SOCKS5代理
• 16个interaction-skills文档覆盖复杂场景（iframe、shadow DOM、拖拽、上传等）
• 支持Browser Use云端浏览器，隔离IP、反检测、并行任务
• 内置录制回放和视频生成

3.7 缺点

• 需要写heredoc Python脚本，交互不如Hermes内置工具顺滑
• 无内置视觉分析（需手动截图+js）
• 连接主Chrome时与用户手动操作共享浏览器，可能互相干扰
• JS中嵌入中文内容有编码问题，需用文件中转或Base64编码

3.8 适用场景

复杂自动化、爬虫、需要复用登录态、需要DevTools面板数据、需要反检测或多浏览器并行的场景。当其他工具走不通时，browser-harness几乎总能找到替代方案。

四、Chrome DevTools MCP服务器

4.1 工作原理

Chrome DevTools MCP是Google官方推出的MCP服务器，通过chrome-devtools-mcp@latest –autoConnect连接Chrome。安装方式：在Hermes的config.yaml中配置mcp_servers，工具以mcp_chrome_devtools_前缀出现在对话中。共29个工具，包括click、fill、navigate_page、take_snapshot、take_screenshot、list_network_requests、get_network_request、performance_start_trace、lighthouse_audit等。

4.2 配置过程

配置最简单——两条命令搞定：

hermes config set mcp_servers.chrome-devtools.command npx
hermes config set mcp_servers.chrome-devtools.args '["-y", "chrome-devtools-mcp@latest", "--autoConnect"]'

hermes mcp list确认状态为enabled，29个工具全部发现。需要/new（/reset）新session后工具才会加载到对话中。

4.3 实战能力

虽然MCP工具需要新session才能在对话中直接调用，但通过browser-harness的持久CDP连接，我们实时演示了MCP工具封装的全部核心能力：

• list_network_requests：获取页面所有网络请求，按类型分类（脚本102个、样式表12个、Fetch 9个等）
• take_snapshot：获取页面无障碍树快照，分析DOM结构
• performance_start_trace / performance_stop_trace：性能轨迹分析
• lighthouse_audit：Core Web Vitals审计（TTFB、FCP、DOM加载时间等）
• evaluate_script：执行JS获取运行时数据
• take_screenshot：页面截图

MCP工具的优势在于把CDP的原始能力封装成命名工具，调用更规范。比如list_network_requests比手写cdp(“Network.enable”) + 事件监听 + getEntriesByType(‘resource’)简洁得多。

4.4 独有能力：DevTools面板集成

Chrome DevTools MCP有一个其他两个工具都没有的核心能力：与Chrome开发者工具面板的深度集成。根据官方博客，你可以在Chrome开发者工具的网络面板中选中一个失败的网络请求，然后让AI代理直接调查该请求。同样适用于元素面板中选中的DOM元素。这意味着开发者可以在手动调试和AI辅助调试之间无缝切换。

安全机制：每次MCP服务器请求远程调试连接时，Chrome都会弹窗要求用户授权。调试期间顶部显示”Chrome正受到自动测试软件的控制”横幅。

4.5 优点

• Google官方支持，Chrome原生集成，长期维护有保障
• 29个命名工具，API设计规范，调用体验好
• 独有DevTools面板集成能力（网络面板、元素面板选中即调查）
• Lighthouse审计能力内置
• 通过MCP协议集成到Hermes等客户端，工具自动发现
• 安全机制完善（用户授权弹窗+控制横幅）

4.6 缺点

• 需要Chrome 144+（当前150满足），且需手动启用remote-debugging
• 功能仍在逐步开放中（目前主要元素+网络面板）
• 不如browser-harness成熟（录制、云端、interaction-skills等）
• 配置变更需要新session才能生效

4.7 适用场景

开发调试场景：调查网络请求、检查DOM元素、性能分析、Lighthouse审计。特别是需要在手动调试和AI辅助之间切换的开发者工作流。

五、横向对比总结

六、推荐选择

日常网页交互和信息提取：首选Hermes内置浏览器。集成度最高，browser_snapshot+browser_vision一体化，对话流中直接调用，体验最顺滑。适合不需要代理、不需要登录态的简单场景。

复杂自动化、爬虫、登录态复用：首选browser-harness。CDP直连控制力最强，支持SOCKS5代理，复用Chrome登录态，16个interaction-skills覆盖复杂场景。当UI操作走不通时可以无缝切换到CDP+API方式。云端浏览器支持反检测和并行任务。

开发调试（网络/性能/元素分析）：首选Chrome DevTools MCP。Google官方支持，独有DevTools面板集成能力——在开发者工具中选中网络请求或DOM元素，直接交给AI代理调查。Lighthouse审计内置。适合需要在手动调试和AI辅助之间切换的开发者。

三者并非互斥：可以同时安装使用。Hermes内置浏览器处理日常任务，browser-harness处理复杂自动化，Chrome DevTools MCP处理开发调试。按场景灵活选择，组合使用效果最佳。

七、本文发布方式

本文由Hermes Agent使用browser-harness自动化发布。具体流程：browser-harness通过CDP连接Chrome -> 获取WordPress登录cookie和REST API nonce -> curl调用POST /wp-json/wp/v2/posts创建草稿 -> PATCH更新状态为publish。文章内容通过JSON文件中转，避免JS中嵌入中文的编码问题。全程未手动操作浏览器，展示了浏览器自动化工具的真实生产力价值。