如何将Chrome DevTools性能分析器JSON转存为.puml等可视化图表？

一、用Catapult实现目标 #

如果已经克隆了Catapult源码，可通过以下步骤精准提取注销流程的调用栈并转成.puml：

1. 启动Catapult本地可视化服务
   运行本地服务器加载Catapult的trace分析界面：

   python $CATAPULT/local_server.py
   

   打开浏览器访问http://localhost:8000/tracing，上传你的my_trace.json文件。

2. 筛选注销相关的调用栈

   • 在界面顶部的搜索框输入注销流程相关的方法名（比如包含logout、signOut的关键词），或者通过时间轴定位注销操作发生的时间段，缩小分析范围。
   • 找到对应的调用栈后，右键点击调用栈节点，选择Export as JSON导出结构化的调用树数据。

3. 将调用树转成PlantUML代码
   编写简单脚本（比如Python）遍历导出的调用树JSON，生成PlantUML树形语法：

   import json
   
   def build_puml(node, depth=0):
       indent = "  " * depth
       line = f"{indent}* {node['title']}\n"
       for child in node.get('children', []):
           line += build_puml(child, depth + 1)
       return line
   
   # 加载导出的调用树JSON
   with open('exported_call_tree.json', 'r') as f:
       call_tree = json.load(f)
   
   # 生成完整的.puml内容
   puml_content = "@startuml\n" + build_puml(call_tree) + "@enduml"
   
   # 保存为.puml文件
   with open('logout_call_tree.puml', 'w') as f:
       f.write(puml_content)
   

二、替代工具方案 #

如果Catapult的流程太繁琐，可尝试以下工具：

1. Perfetto #

同属Chromium生态的性能分析工具，支持直接导入Chrome DevTools导出的JSON trace：

• 打开Perfetto界面（本地或在线），上传trace文件后，通过筛选器定位注销流程的调用栈。
• 导出调用栈的结构化数据后，用上述类似的脚本转成.puml。

2. 自定义脚本直接解析Trace JSON #

Chrome性能Trace的核心数据在traceEvents数组中，其中ph字段为X表示函数调用开始，E表示结束。可以直接编写脚本关联这些事件，生成调用树：

• 遍历traceEvents，筛选出注销相关的事件（通过name或args字段匹配）。
• 根据tid（线程ID）和ts（时间戳）关联开始/结束事件，构建树形结构。
• 最后生成PlantUML代码，示例逻辑参考上述Python脚本。

3. 本地CLI工具 #

使用chrome-trace-parser这类Node.js CLI工具，快速提取调用栈：

npx chrome-trace-parser my_trace.json --filter "logout" --format tree > logout_call_tree.txt

然后手动或用脚本把树形文本转成.puml格式。

内容的提问来源于stack exchange，提问作者ar_IGT