agent-browser Network Control: Request Interception & Page Diagnostics

Network Control

agent-browser provides full network request interception capabilities.

Route Interception

# Intercept a specific URL
agent-browser network route https://api.example.com/data

# Block a request
agent-browser network route https://analytics.example.com/track --abort

# Mock a response
agent-browser network route https://api.example.com/data --body '{"status":"ok"}'

# Block by resource type
agent-browser network route '*' --abort --resource-type image

# Block third-party scripts
agent-browser network route '*' --abort --resource-type script

Request Tracking

# View all requests
agent-browser network requests

# Filter by URL
agent-browser network requests --filter api

# Filter by type
agent-browser network requests --type xhr,fetch

# Filter by status
agent-browser network requests --status 2xx
agent-browser network requests --status 400-499

# View request details
agent-browser network request req_abc123

Use Cases

HAR Recording

HAR (HTTP Archive) is the standard format for network request logging.

# Start recording
agent-browser network har start

# Browse
agent-browser open https://example.com

# Stop and save
agent-browser network har stop ./performance.har

HAR files contain every request detail: timing, headers, cookies. Open in Chrome DevTools Performance panel.

HAR for Scraping

#!/bin/bash
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"

# Check HAR for 4xx/5xx — failed resources may indicate proxy issues

React DevTools Integration

Enable React DevTools

agent-browser open --enable react-devtools https://example.com

Component Tree

agent-browser react tree
agent-browser react inspect <fiberId>

Render Tracking

agent-browser react renders start
agent-browser click @e5
agent-browser wait 1000
agent-browser react renders stop

Suspense Boundaries

agent-browser react suspense
agent-browser react suspense --only-dynamic --json

Web Vitals

agent-browser vitals https://example.com
agent-browser vitals https://example.com --json

Vitals via Proxy

export HTTP_PROXY=http://user:pass@proxy.16yun.cn:8888
agent-browser vitals https://example.com --json

# Compare direct vs proxy performance

Proxy latency mainly affects TTFB. If TTFB increases >1s, consider switching to a geographically closer proxy node or using a dedicated proxy.

Combined Diagnostics

#!/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"

Summary