Browser Network Inspector
A single-skill browser debugging capture tool for inspecting page requests and turning them into readable reports.
Use this when you want to:
- - see which APIs a page or button triggers
- inspect login, registration, or form-submit flows
- capture page-level
fetch / XMLHttpRequest / basic WebSocket activity - export a clean JSON + Markdown report after browser actions
This skill is packaged as one workflow. Internally it uses a local browser runtime, but the user-facing experience should be treated as one skill from start to finish.
Use this skill for
- - Debugging requests from a web page you are authorized to inspect
- Understanding login / registration / submit flows at the page level
- Seeing which APIs a button click or form submit triggers
- Capturing and summarizing
fetch / XMLHttpRequest activity from the current page - Producing a redacted request summary for later analysis
Do not use this skill for
- - Extracting or replaying third-party login sessions
- Capturing full system traffic
- Pulling access tokens, cookies, session secrets, or passwords for reuse
- Bypassing captchas, auth, or platform protections
About the capture model
This skill provides browser-side request capture, not raw packet sniffing.
It is designed to help with:
- - page request inspection
- form submission debugging
- login / registration flow analysis
- browser API tracing around user actions
It can observe:
- - page-level INLINECODE4
- page-level INLINECODE5
- basic WebSocket lifecycle + message events
It does not try to replace system/network tools such as:
- - Wireshark
- mitmproxy
- Fiddler
It also does not inspect arbitrary native processes or full machine traffic.
In short: this skill is best described as a browser debugging capture and reporting tool.
Runtime expectation
- - This skill expects a local
agent-browser CLI runtime to be installed on the machine. - The helper script
scripts/capture-session.js auto-detects the local binary and drives the browser runtime for you. - If
agent-browser is missing, install it first before using this skill.
Workflow
- 1. Open the target page with the browser runtime managed by this skill.
- Inject the network collector into the page:
CODEBLOCK0
- 3. Optional: configure include/exclude host filters before the flow:
CODEBLOCK1
- 4. Perform the desired browser actions (open, click, fill, submit, wait).
- Read back the captured records:
CODEBLOCK2
- 6. Save the JSON output to a local file.
- Run the summarizer:
CODEBLOCK3
- 8. Or use the bundled one-shot helper after you finish the browser actions:
CODEBLOCK4
v2 additions
- - Host include/exclude filtering
- Basic WebSocket event logging
- One-shot export helper: INLINECODE9
- Improved summary report with source breakdown
Polished workflow helpers
Additional JS-only helpers included:
- -
scripts/clear-session.js — clear the in-page capture buffer - INLINECODE11 — create a timestamped report directory and save both JSON + Markdown
- Export helpers sanitize non-JSON wrapper output before writing capture files
Example:
CODEBLOCK5
Notes
- - This captures page-level JS network activity. It is not a full packet sniffer.
- INLINECODE12 and
XMLHttpRequest are supported in v1. - v2 adds basic WebSocket event logging and a Node.js export helper.
- Request and response bodies are truncated and redacted before export.
- If a site uses service workers, native browser internals, or non-page network paths, results may be incomplete.
- Keep helper scripts in JavaScript or Python only for this environment.
- The bundled export helper is Node.js-based, auto-detects the local browser runtime executable, and injects the collector in chunks to avoid Windows command-length limits.
Redaction defaults
The collector and summarizer should redact or suppress obvious sensitive values such as:
- - INLINECODE14
- INLINECODE15
- INLINECODE16
- INLINECODE17
- INLINECODE18
- INLINECODE19
- INLINECODE20
- INLINECODE21
- INLINECODE22
Output expectation
The summary should tell you:
- - how many requests were captured
- which endpoints were hit
- which requests failed
- rough timing and status distribution
- likely key requests in the user flow
If the user wants raw logs, save them locally first and avoid echoing full sensitive payloads into chat.
浏览器网络检查器
一个单一技能的浏览器调试捕获工具,用于检查页面请求并将其转换为可读报告。
在以下场景使用此技能:
- - 查看页面或按钮触发了哪些API
- 检查登录、注册或表单提交流程
- 捕获页面级fetch/XMLHttpRequest/基础WebSocket活动
- 在浏览器操作后导出干净的JSON + Markdown报告
此技能打包为一个工作流。内部使用本地浏览器运行时,但从用户角度应视为一个完整的技能。
适用场景
- - 调试你有权检查的网页请求
- 理解页面级别的登录/注册/提交流程
- 查看按钮点击或表单提交触发了哪些API
- 捕获并汇总当前页面的fetch/XMLHttpRequest活动
- 生成脱敏后的请求摘要供后续分析
不适用场景
- - 提取或重放第三方登录会话
- 捕获完整的系统流量
- 提取访问令牌、Cookie、会话密钥或密码用于复用
- 绕过验证码、认证或平台保护
关于捕获模型
此技能提供浏览器端请求捕获,而非原始数据包嗅探。
旨在帮助:
- - 页面请求检查
- 表单提交调试
- 登录/注册流程分析
- 用户操作相关的浏览器API追踪
可观察:
- - 页面级fetch
- 页面级XMLHttpRequest
- 基础WebSocket生命周期+消息事件
不尝试替代系统/网络工具,如:
- - Wireshark
- mitmproxy
- Fiddler
也不检查任意原生进程或完整机器流量。
简而言之:此技能最适合描述为浏览器调试捕获与报告工具。
运行时要求
- - 此技能要求机器上安装本地agent-browser CLI运行时。
- 辅助脚本scripts/capture-session.js会自动检测本地二进制文件并驱动浏览器运行时。
- 如果缺少agent-browser,请先安装再使用此技能。
工作流程
- 1. 使用此技能管理的浏览器运行时打开目标页面。
- 将网络收集器注入页面:
powershell
$collector = Get-Content $env:USERPROFILE\.openclaw\workspace\skills\browser-network-inspector\scripts\collect-network.js -Raw
agent-browser eval $collector
- 3. 可选:在流程前配置包含/排除主机过滤器:
powershell
agent-browser eval window.bniSetConfig({ includeHosts: [example.com], excludeHosts: [ads.example.com], captureWebSocket: true })
- 4. 执行所需的浏览器操作(打开、点击、填写、提交、等待)。
- 读取捕获的记录:
powershell
agent-browser eval JSON.stringify(window.bniExport ? window.bniExport() : [])
- 6. 将JSON输出保存到本地文件。
- 运行汇总器:
powershell
node $env:USERPROFILE\.openclaw\workspace\skills\browser-network-inspector\scripts\summarize-network.js [output.md]
- 8. 或在完成浏览器操作后使用捆绑的一键辅助脚本:
bash
node $env:USERPROFILE/.openclaw/workspace/skills/browser-network-inspector/scripts/capture-session.js --json-out .capture/session.json --md-out .capture/session.md --include-hosts example.com,api.example.com
v2新增功能
- - 主机包含/排除过滤
- 基础WebSocket事件日志记录
- 一键导出辅助脚本:scripts/capture-session.js
- 改进的汇总报告,包含来源分类
完善的工作流辅助工具
额外包含的纯JS辅助工具:
- - scripts/clear-session.js — 清除页面内捕获缓冲区
- scripts/capture-and-report.js — 创建带时间戳的报告目录,同时保存JSON + Markdown
- 导出辅助工具在写入捕获文件前会清理非JSON包装器输出
示例:
bash
node $env:USERPROFILE/.openclaw/workspace/skills/browser-network-inspector/scripts/clear-session.js
node $env:USERPROFILE/.openclaw/workspace/skills/browser-network-inspector/scripts/capture-and-report.js --include-hosts example.com,api.example.com --label login-flow --open-report
注意事项
- - 此工具捕获页面级JS网络活动,并非完整的数据包嗅探器。
- v1支持fetch和XMLHttpRequest。
- v2增加了基础WebSocket事件日志记录和Node.js导出辅助工具。
- 请求和响应体在导出前会被截断和脱敏。
- 如果站点使用Service Worker、原生浏览器内部机制或非页面网络路径,结果可能不完整。
- 此环境仅支持JavaScript或Python格式的辅助脚本。
- 捆绑的导出辅助工具基于Node.js,自动检测本地浏览器运行时可执行文件,并分块注入收集器以避免Windows命令行长度限制。
默认脱敏规则
收集器和汇总器应脱敏或隐藏明显的敏感值,例如:
- - authorization
- cookie
- set-cookie
- password
- token
- accessToken
- refreshToken
- session
- csrf
输出预期
摘要应告知你:
- - 捕获了多少请求
- 访问了哪些端点
- 哪些请求失败
- 大致的时间分布和状态分布
- 用户流程中可能的关键请求
如果用户需要原始日志,请先本地保存,避免在聊天中回显完整的敏感负载。