HAR 文件查看

怎么用

1. 选择从 Chrome、Firefox、Edge 或 Safari 开发者工具导出的 .har 文件，或直接把 HAR JSON 粘贴进输入框。
2. 点 Analyze。文件通过页面内的 FileReader 读取，录制内容不会离开本机。
3. 看 概览：请求数、域名数、总跨度、耗时之和、中位数、传输字节与错误数。
4. 用瀑布图找空档。每根条形从该请求的开始偏移画到响应结束，所以「耗时长」和「开始得晚」都能一眼看出来。
5. 想按异常值归类时，把排序方式换成耗时或大小，就不必按时间顺序逐行翻。

常见用法

• 定位慢请求 —— 按耗时排序，先看最慢的 5 条，再去翻几百行的明细。
• 确认页面到底加载了什么 —— 导出的 HAR 会列出重定向、预加载和加载失败的资源，一个都不漏。
• 核对缓存行为 —— 304 响应体积小、条形短，在图上很明显。
• 复盘别人那边的问题 —— 让同事导出 HAR，你在这里就能看，不用装任何工具。
• 查体积问题 —— 按大小排序，谁占了传输总量的大头立刻可见。

常见问题

问：数据会上传吗？ 答：不会。HAR 录制里往往有 Cookie、授权头、会话 URL，甚至响应体。本工具用 FileReader 把文件读进内存、用 JSON.parse 解析，全程没有 fetch、没有上传、也没有针对内容的行为分析，生产环境的录制可以放心在这里打开。

问：读取了 HAR 的哪些字段？ 答：log.entries 里的 request.url、request.method、response.status、response.bodySize、response.headersSize、entry.time 与 entry.startedDateTime。如果存在 _transferSize 会优先采用，因为它对压缩传输更准确。

问：为什么传输总量说是不完整的？ 答：部分导出工具会把 bodySize 或 headersSize 写成 -1。这些条目仍然计数，但不参与字节统计，概览里会写明有多少条上报了体积。

问：会分析请求体和响应体吗？ 答：不会。只读取耗时、状态码与体积这些元数据。请求体与响应体只是留在内存里的对象里，从不渲染到页面上，所以载荷里的敏感信息不会被打出来。