高级预览无需 AI本地预览可导出调试友好

HAR 文件瀑布流查看器

粘贴 HAR 导出文件，查看请求耗时、状态码、主机、MIME 类型和最慢请求，快速定位前端网络与 API 瓶颈。

示例

Detected JSON

This input may work better in the matching tool. Open JSON tool

HAR JSON

{
  "log": {
    "version": "1.2",
    "creator": {
      "name": "DiagramPreview"
    },
    "entries": [
      {
        "startedDateTime": "2026-06-16T10:00:00.000Z",
        "time": 82,
        "request": {
          "method": "GET",
          "url": "https://app.example.com/checkout"
        },
        "response": {
          "status": 200,
          "content": {
            "mimeType": "text/html"
          }
        },
        "timings": {
          "wait": 55,
          "receive": 12
        }
      },
      {
        "time": 146,
        "request": {
          "method": "POST",
          "url": "https://api.example.com/cart/validate"
        },
        "response": {
          "status": 200,
          "content": {
            "mimeType": "application/json"
          }
        },
        "timings": {
          "wait": 118,
          "receive": 16
        }
      },
      {
        "time": 312,
        "request": {
          "method": "POST",
          "url": "https://api.example.com/orders"
        },
        "response": {
          "status": 201,
          "content": {
            "mimeType": "application/json"
          }
        },
        "timings": {
          "wait": 280,
          "receive": 20
        }
      }
    ]
  }
}

瀑布流分析就绪

预览结果会显示在这里。

下一步可以继续

把当前预览结果带到相关工具里继续转换、排查或导出。

AI 图表生成器

用自然语言生成可编辑 Mermaid 图表，并在导出前完成预览和 review。

打开

Mermaid AI 修复器

用 AI 修复 Mermaid 语法错误，并在发布前检查图表语义和可读性。

打开

架构图生成器

用 AI 从产品或系统说明生成 Mermaid 架构图。

打开

使用方法

1在浏览器 DevTools 复现问题后导出 HAR。
2粘贴脱敏 HAR，检查请求数、总耗时、失败请求、host 和最慢请求。
3关注长等待、重复请求、4xx/5xx、大 payload 和异常第三方 host。
4分享截图或摘要前，移除 cookie、token 和私有 header。

常见场景

前端性能调试API waterfall review故障截图第三方请求审计浏览器网络导出预览

常见问题

可以直接粘贴生产 HAR 吗？

必须先脱敏。HAR 可能包含 Cookie、Authorization、带 token 的 URL 和私有请求体。

应该先看什么？

先看失败请求、总耗时、最慢请求、重复调用和意外第三方 host。

HAR Viewer 能完成根因分析吗？

它主要用于初筛。深入根因仍需要 trace、服务端日志和浏览器性能分析。

HAR File Viewer 会把浏览器网络导出预览成请求时间线、状态汇总、最慢请求、host 分布和 waterfall 调试信息。

它帮助前端和 API 工程师检查真实浏览器行为，不必打开重型桌面工具，也不必把敏感日志粘给 AI。

适合对比页面加载、在 issue 里解释慢接口、准备故障截图，以及判断哪些请求需要继续查 trace。

Demo：把浏览器导出变成 API 调试说明

好的 HAR review 应该记录用户动作，并指出哪个请求慢或失败。Viewer 可以把原始 JSON 导出压缩成 issue 里真正有用的事实。

只录制失败流程，不要导出完整浏览会话。
移除 Cookie、Authorization、Set-Cookie 和私有 query 参数。
先比较状态码和耗时，不要直接假设是前端问题。

1. 复现 checkout submit
2. 从 DevTools Network 导出 HAR
3. 删除 Cookie 和 Authorization header
4. 检查失败请求和最慢调用
5. 附上截图和脱敏 request id

这个流程能产出有用 bug report，同时避免泄露完整浏览会话。

性能排查：把 HAR 当瀑布图看，而不是表格

HAR 最有价值的是解释时间花在哪里。应按导航阶段、缓存行为、阻塞时间、第三方域名分组，而不只是看状态码。

先看 queued/blocked 时间，再判断是不是后端慢。
把第三方脚本和字体分组，评估总成本。
比较 transferred size 和 decoded size，发现压缩或缓存问题。

GET /app.js 200 42ms 18KB cached
GET /api/feed 200 840ms 74KB network
GET https://analytics.example/script.js 200 310ms 92KB third-party