在 chrome://tracing 中手动加载 json

Posted 2023-05-08

【中文标题】在 chrome://tracing 中手动加载 json

【英文标题】：Load json manually in chrome://tracing

【发布时间】：2018-08-15 07:19:41

【问题描述】：

我有一个跟踪事件 JSON 数据，我想使用 chrome://tracing 查看它。但是，我不想每次都加载 JSON。

有没有办法可以将 JSON 数据传递给 chrome://tracing，这样无需手动单击加载数据，我的所有数据都会被加载？

【参考方案1】：

Trace-viewer 工具目前以 3 种方式加载 JSON 文件：

记录

新轨迹时 选择文件后通过加载按钮

加载

文件时 将文件

拖放

到选项卡时（拖放）

所有这些都对活动跟踪进行一次性更新。

---

技术细节

查看profiling_view 并注意

 tr.ui.b.readFile(file).then(
 ...
    this.setActiveTrace(file.name, data);

以及从 beginRecording 、 onLoadClicked_ 和 dropHandler_ 调用 setActiveTrace 的一些变化。

---

解决方案建议

是的，有几种方法可以将 json 数据传递给 chrome://tracing（即跟踪查看器），而无需手动单击加载数据。

取决于你想付出多少努力：

不要手动点击加载而是拖放文件 基于监视 JSON 文件更改的脚本自动拖放 (example with selenium) 根据文件更改自动加载 Contribute to Trace Viewer yourself 并添加此功能。请参阅 the tracing ecosystem explainer 和 contributing。请注意，它现在是 GitHub 中 Catapult 项目的一部分。

见fswatch - a cross-platform file change monitor.

【参考方案2】：

这是一个解决方案，如果您可以放宽必须使用 Chrome-Tracing 打开它的要求。 Speedscope 是一个不错的替代品，可以从命令行轻松启动。

为了离线使用，或者在终端方便，也可以通过npm安装speedscope：

npm install -g speedscope

调用 speedscope /path/to/profile 将在您的默认浏览器中加载 speedscope。 Source

speedscope <my-chrome-tracing.json> 打开文件。

Speedscopes 提供不同的视图，但有时与 Chrome-Tracing 的视图不同。所以它可能不是所有用例的正确选择。

【讨论】：

轻巧快捷，推荐，speedscope.app 也便于安装！

【参考方案3】：

this GopherCon video 显示了我猜的另一种解决方案，即在浏览器中加载一个 html 页面，其中可能嵌入了 javascript，它“加载”了跟踪文件。虽然我怀疑不是来自磁盘文件，而是通过自定义 http 服务器直接“提供”它。