agent-browser 网络控制：请求拦截与页面诊断

网络控制

agent-browser 提供了完整的网络请求拦截能力，这对采集和调试都非常有用。

路由拦截

# 拦截特定 URL 的请求
agent-browser network route https://api.example.com/data

# 阻断请求（不让它发出）
agent-browser network route https://analytics.example.com/track --abort

# 模拟响应
agent-browser network route https://api.example.com/data --body '{"status":"ok"}'

# 按资源类型阻断（如禁止加载图片）
agent-browser network route '*' --abort --resource-type image

# 阻断第三方脚本
agent-browser network route '*' --abort --resource-type script

请求追踪

# 查看所有请求
agent-browser network requests

# 按 URL 过滤
agent-browser network requests --filter api

# 按类型过滤
agent-browser network requests --type xhr,fetch

# 按状态码过滤
agent-browser network requests --status 2xx
agent-browser network requests --status 400-499

# 查看具体请求详情
agent-browser network request req_abc123

应用场景

HAR 录制

HAR（HTTP Archive）是标准化的网络请求日志格式，用于分析页面性能。

# 开始录制
agent-browser network har start

# 执行操作
agent-browser open https://example.com
# ... 浏览页面 ...

# 停止录制并保存
agent-browser network har stop ./performance.har

HAR 文件包含所有请求的详细信息：开始时间、耗时、请求头、响应头、Cookie 等。可以用 Chrome DevTools 的 Performance 面板打开分析。

采集场景的 HAR 用途

#!/bin/bash
# 使用代理采集时，通过 HAR 验证资源加载完整性

export HTTP_PROXY=http://user:pass@proxy.16yun.cn:8888

agent-browser batch \
  "open https://example.com" \
  "network har start" \
  "wait 3000" \
  "network har stop ./target-site.har" \
  "screenshot page.png"

# 查看 HAR 中 4xx/5xx 请求
# 如果某个资源加载失败，说明代理配置可能有问题

React DevTools 集成

agent-browser 内置了 React DevTools hook，可以直接从 CLI 探查 React 应用。

启用 React DevTools

# 启动时启用 React DevTools
agent-browser open --enable react-devtools https://example.com

React 组件树

# 查看完整组件树
agent-browser react tree

# 检查特定组件（props, hooks, state, source）
agent-browser react inspect <fiberId>

渲染追踪

# 开始记录渲染
agent-browser react renders start

# 执行操作触发重渲染
agent-browser click @e5
agent-browser wait 1000

# 停止并查看渲染记录
agent-browser react renders stop

Suspense 边界

# 查看 Suspense 边界状态
agent-browser react suspense

# 只查看动态加载的边界
agent-browser react suspense --only-dynamic --json

Web Vitals

# 采集页面性能指标
agent-browser vitals https://example.com

# 输出 JSON 格式
agent-browser vitals https://example.com --json

Web Vitals 包含：

通过代理采集 Vitals

export HTTP_PROXY=http://user:pass@proxy.16yun.cn:8888

# 采集目标站的性能数据——验证代理链路的延迟影响
agent-browser vitals https://example.com --json

# 对比直连和代理的性能差异
agent-browser vitals https://example.com --json > vitals-via-proxy.json

代理延迟通常会增加 TTFB（首字节时间），但 LCP/FCP 受代理影响较小（主要取决于页面渲染性能）。如果 TTFB 增加过大（超过 1s），建议更换更靠近目标站的代理节点或使用独享代理。

综合调试流程

#!/bin/bash
# 完整的页面诊断流程

export HTTP_PROXY=http://user:pass@proxy.16yun.cn:8888

agent-browser batch \
  "open --enable react-devtools https://example.com" \
  "network har start" \
  "wait networkidle" \
  "react tree" \
  "vitals" \
  "screenshot page.png" \
  "network har stop ./diagnostics.har"

echo "诊断完成："
echo "  - HAR 文件: ./diagnostics.har"
echo "  - 截图: page.png"

总结