高级预览Live previewBrowser workflowExport SVG

HAR 文件转时序图

把 DevTools 导出的 HAR 文件变成可读请求时序，帮助前端、后端和 QA 对齐真实浏览器行为。

示例

Detected JSON

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

HAR JSON

预览就绪

渲染后的图会显示在这里。

下一步可以继续

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

API 排障工作流openapi-to-sequencepostman-collection-sequence-diagramhar-file-sequence-diagramapi-error-flow-diagram

OpenAPI 转时序图

把 OpenAPI paths 转成 Mermaid 时序图，用于接口文档、后端评审和运行时对比。

打开

Postman Collection 转时序图

把 Postman Collection JSON 转成接口调用时序图，检查请求顺序和文档流程。

打开

API 错误流程图

把 API 状态码、失败条件、重试规则和恢复动作整理成清晰的错误流程图。

打开

使用方法

1从浏览器 DevTools 导出 HAR，并移除 cookie、token 和敏感 header。
2粘贴 HAR JSON，查看请求顺序、域名、方法、状态码和耗时。
3重点检查慢请求、失败状态码、重复请求和第三方资源。
4把时序图和原始 HAR 摘要放进工单或事故复盘，方便他人复现。

常见场景

前端 API 调试HAR waterfall 复盘接口性能排查第三方脚本检查事故证据整理

常见问题

HAR 文件里可能有敏感信息吗？

有。HAR 常包含 cookie、Authorization header、query 参数和用户数据，粘贴前必须清理。

时序图和 DevTools waterfall 有什么区别？

waterfall 更适合看精确耗时；时序图更适合解释请求顺序、参与域名和调试故事。

可以证明后端慢吗？

不能单独证明。HAR 显示浏览器观察到的请求耗时，需要结合服务端日志、trace 和缓存信息判断。

应该把完整 HAR 放进工单吗？

通常不建议。先提取关键请求和截图，必要时再提供脱敏 HAR。

这个工具可以把已有开发者源码转成更容易评审的可视化说明，适合文档、工单和架构讨论。

建议先用小样例确认关系，再粘贴更大的源码，避免一次性输入太复杂。

导出 SVG 或 PNG 后，也建议把源文本和图片一起保留，方便后续修改。

Demo：把 checkout HAR 转成请求故事

checkout 页面常同时请求页面、购物车校验、下单接口和订单状态。时序图能让团队快速看到真实顺序。

标出页面请求和 API 请求。
突出 4xx/5xx 状态码。
把第三方脚本和核心接口分开讨论。

GET /checkout -> 200
POST /cart/validate -> 200
POST /orders -> 201
GET /orders/123 -> 200

排障清单：慢请求不一定是后端慢

HAR 中的耗时可能包含 DNS、连接、排队、缓存、下载和浏览器调度。时序图帮助定位顺序，最终原因还要结合更多证据。

检查是否有重复请求或重定向。
检查第三方脚本是否阻塞关键流程。
把后端日志和 trace 与 HAR 时间对齐。

Observed slow: POST /orders 1280ms
Need: server log duration + trace span + cache headers

隐私清单：分享 HAR 前先脱敏

HAR 是高风险调试材料。公开或跨团队分享前，应移除所有身份、会话和客户相关信息。

删除 cookie、Authorization 和 set-cookie。
替换真实域名、用户 ID、订单号和邮箱。
不要把完整生产 HAR 放到公开 issue。

Authorization: Bearer [redacted]
Cookie: [removed]
email: user@example.com -> user@example.test