在浏览器中分析 HAR 文件：实战指南

晚上 11 点，同事甩来一个 HAR 文件。线上 checkout 已经挂了一小时，stack trace 干净得无从下手。这份 HAR 是唯一的 ground truth——客户浏览器看到的真实请求、headers、timings 和响应。在 DevTools 里打开它意味着重启 Chrome 加对应 flag、翻 600 条 entry、把数值抄进记事本。等你找到那个搞坏购物车的 4xx，已经在 UI 操作上耗掉 20 分钟。

把 HAR 文件拖进分析器 →

HAR 文件里究竟有什么

HAR(HTTP Archive)是 W3C Web Performance Working Group 定义的一种 JSON 文档。所有浏览器的 DevTools 都能导出——Chrome、Firefox、Safari、Edge 都产出 HAR 1.2。结构很直白:

{
  "log": {
    "version": "1.2",
    "creator": { "name": "Firefox", "version": "..." },
    "entries": [
      {
        "startedDateTime": "2026-05-22T10:14:03.512Z",
        "time": 156.5,
        "request":  { "method": "GET", "url": "...", "headers": [...], "cookies": [...] },
        "response": { "status": 200, "statusText": "OK", "headers": [...], "content": {...} },
        "timings":  { "blocked": 4.2, "dns": 18.6, "connect": 55, "ssl": 25, "send": 0.5, "wait": 78.4, "receive": 27.8 }
      }
    ]
  }
}

entries 数组是最有价值的部分。每条 entry 把请求、响应和 timings 三段配对在一起。重建现场需要的一切——包括 TLS 开销、排队延迟、TTFB——都在这里。挑战是怎么读它而不被一堆 JSON 淹没。

分析器总览

把 HAR 文件拖到页面，你会在单一 tool widget 里看到四个 view:

View	它回答什么问题
Overview	这次页面加载整体看上去健康吗?
Waterfall	时间究竟花在哪里?
Detail	浏览器具体发了什么、又收到什么?
Filter & Export	能不能缩小范围、再分享出去?

四个 view 全部跑在你的浏览器里。无上传、无 token、无账号。文件不会离开你的机器——这一点很关键,因为 HAR 几乎总会带 cookies、bearer token 和你本不该上传到任何 SaaS 仪表盘的 PII。

Overview——先看大局

Overview 显示四个 stat card(请求数、总耗时、传输大小、独立 domain 数)、一张状态码饼图,以及按请求数排序的 Top 5 domain。这是 30 秒分诊视图——这次加载看上去健康,还是有明显异常?

最先要看的几件事:

• 4xx 或 5xx 请求是否激增。 饼图的扇区按数量切分。如果 checkout 页上出现一块明亮的 4xx,那就是第一个要看的方向。
• 是否有某个 domain 主导了请求数。 如果 CDN domain 有 50 条 entry 而 API 只有 2 条,瓶颈大概率在静态资源而不是 API。
• 总耗时 vs 传输大小的反差。 8 个请求 1.3 MB 传输却用了 8 秒,通常是某个 endpoint 慢,而不是 payload 大。

Waterfall——找到瓶颈

Waterfall 给每条请求渲染一行,每行按 DevTools 默认显示的六个 phase 切分:

Phase	HAR 1.2 字段	它衡量什么
Queued / Stalled	blocked	连接数限制、浏览器队列、proxy 协商
DNS Lookup	dns	DNS 解析
Initial Connection	connect	TCP 握手(HAR 1.2 中 connect 包含 ssl)
Request Sent	send	把请求字节推出去的耗时
Waiting (TTFB)	wait	服务器处理 + 首字节
Content Download	receive	读取响应体

如果某一行被 wait 主导,那是 server 慢。如果被 blocked 主导,浏览器在撞连接数上限(大多数浏览器每 origin 6 条)。如果被 connect 主导,每个请求都在付新 TCP + TLS 的成本——连接复用断了。

Waterfall 默认渲染前 200 条。点 Show all 把剩下的也注入进来。500 entry 的 HAR 在现代笔记本上注入约 80 ms;没有虚拟滚动,但有足够的纪律避免一上来就画两千行 DOM。

Detail——看浏览器具体发了什么

在 Detail view 的请求列表里挑任意一行就能看细节。右侧面板显示 headers、cookies、请求和响应体,以及一个一键复制的完整 cURL 命令。

这里的 timings 表保留 HAR 全部 7 个原始字段,包括 ssl。Waterfall 把 Initial Connection 用 connect 表示,因为 HAR 1.2 把 SSL/TLS 时间算在 connect 里:

If ssl is defined, the time is also included in the connect field (to ensure backward compatibility with HAR 1.1). — HAR 1.2 spec, W3C Web Performance WG (accessed 2026-05-22)

换句话说:entry.time = blocked + dns + connect + send + wait + receive——ssl 不单独相加。如果你曾经困惑为什么手动求和每次 TLS 握手都比 entry.time 多出 25 ms,答案就在这里。Detail view 仍然保留原始字段,需要时可以审计具体分解。

被设为 -1 的字段表示 “不适用”——最常见的场景是连接复用(没有 DNS、没有 connect、没有 TLS),或响应来自 HTTP 缓存(全部 -1,time 为零或接近零)。

Filter & Export——切片和分享

Filter view 并排展示三个筛选维度:HTTP 状态码类别、资源类型、domain。每个都是多选;旁边的计数会随筛选范围收缩而更新。

底部有两个 action:

• Export HAR subset. 生成一个合法的 HAR 1.2 文件,只包含匹配筛选的 entry。适合把最小复现包发给 backend 工程师,而不泄漏整段 session。
• Copy all as cURL. 把当前可见的所有 entry 拼成 curl 命令。可以在终端里复跑一个序列,或粘到 postmortem 里。

两个 action 都通过 Blob + URL.createObjectURL 在客户端下载。没有 server 往返、没有上传体积上限(除了浏览器自身 JSON parser 的能力,它能舒服地处理几十 MB 的 HAR)。

HAR 1.2 的几个坑

HAR 规范已经走过 15 年,处处显出年代感。如果你在它之上构建工具,有几件事要知道:

• ssl 是信息字段,不是相加项。 上文已说明。这段 spec 写的是 HAR 1.1 向后兼容,也是第三方 HAR reader 最常见的实现 bug。
• -1 是 “不适用” 哨兵值。 求和或渲染前总要先检查 phase >= 0。本分析器把 -1 当作 “跳过这一段”——不画 waterfall 段、表格单元显示 N/A。
• 不变式留了余量。 真实浏览器会因为系统时钟精度引入亚毫秒级抖动。分析器允许 entry.time 和段总和之间最多 1.5 ms 漂移,超过才标记为不一致。实际生产 HAR 一般远低于这个阈值。
• startedDateTime 是 wall-clock 而非 monotonic。 时移 HAR 做回放时要小心——抓取过程中的时钟变化(NTP 校时、休眠/唤醒)可能在长抓取里产生非单调时间戳。

我们为什么做这个工具(以及刻意不做的事)

ZeroTool 已有约 120 个浏览器端开发者小工具——JSON 格式化、JWT 解码、URL 解析、cron 解释——但一直没有网络分析方向的工具。HAR reader 已经存在(DebugBear、jam.dev、OpenReplay、Google 的 HAR Analyzer toolbox),其中很多附在更大的监控或协作产品里。我们想要的是最小可用品:拖文件、拿到 90% 场景需要的四个 view、走人。

我们刻意没做:

• 请求重放器。 只读分析器和请求工具是两件事。要重放请用 cURL 复制 + 你的终端。
• 时间轴动画 / 视频同步。 有用,但不在单一 tool widget 范围内。
• 服务端分析。 整个工具的核心是让你的 HAR——带着所有 cookies 和 bearer token——不离开你的浏览器。

如果这些边界刚好契合你的需求,本分析器就是为你准备的那个无聊、快速、私密的默认选项。

---

下一次别再把 HAR 扔进 SaaS 仪表盘了,直接拖到浏览器里。打开 HAR File Analyzer →