Firefox 是不是允许使用“聚合”火焰图来分析 JS 应用程序？

Posted 2023-03-06

【中文标题】Firefox 是不是允许使用“聚合”火焰图来分析 JS 应用程序？

【英文标题】：Does Firefox allow profiling JS apps using "aggregated" flame charts?Firefox 是否允许使用“聚合”火焰图来分析 JS 应用程序？

【发布时间】：2018-01-26 10:56:44

【问题描述】：

火狐开发者工具支持flame charts，不过好像是时间作为X轴：

在火焰图视图本身中，X 轴是时间。上面的屏幕截图涵盖了从 1435 毫秒到略过 1465 毫秒的时间段。沿 Y 轴是该时间点调用堆栈上的函数，顶层位于顶部，叶函数位于底部。函数采用颜色编码，以便于区分。

通常，火焰图使用百分比作为 X 轴，例如：pyflame 或 Brendan Gregg's flame graphs。

我发现基于时间的火焰图令人困惑，并且错过了获取每个函数的聚合时间的能力（就内容而言类似于Call Tree，但以更直观的方式表示）。此外，如果一个函数很短但被多次调用，很容易错过它，而在“聚合”火焰图上，它会突出显示。要了解为什么基于时间的火焰图令人困惑，让我借用 another post 的示例 - 诚然在 Chrome 中，但问题是相似的：

即使某些功能占用了总时间的 30%，也不会在上图中显示。

有什么方法（通过插件或设置）我可以让 Firefox 显示所选时间片的聚合火焰图而不是基于时间的火焰图？

【问题讨论】：

您正在重新发现problem with flame-graphs，尽管它们很可爱。 another method 确实有效。

并非如此。我知道它们的局限性并且可以很好地使用它们。我的问题是 Chrome 和 Firefox 中的这些东西并不是真正的火焰图。数据在那里，但它没有被聚合，所以它应该是不那么明显的——这就是我想要解决的问题。

【参考方案1】：

extending the DevTools 似乎相当有限，除非您正在创建自己的面板，但您实际上无法访问其中的分析器来生成火焰图。

您仍然可以将记录的配置文件保存到 JSON 文件中，对其进行解析，然后创建自己的火焰图来计算总聚合运行时间。

您还可以尝试Gecko Profiler Add-on 进行一些更高级的分析。不过，您将处于同一条船上，因为您需要将其导出以对配置文件数据进行自己的聚合。