javascriptfirefoxprofilingflamegraph

Does Firefox allow profiling JS apps using "aggregated" flame charts?


Firefox Developer Tools support flame charts, but it seems time is used as X-axis:

In the Flame Chart view itself, along the X-axis is time. The screenshot above covers the period from 1435ms to a little past 1465ms. Along the Y-axis are the functions on the call stack at that point in time, with the top-level at the top, and the leaf function at the bottom. Functions are color-coded to make them easier to distinguish.

Usually, flame charts use percentage as X axis, for instance: pyflame or Brendan Gregg's flame graphs.

I find the time-based flame charts confusing and miss the ability to get aggregated times per function (similar to Call Tree as far as content is concerned, but represented in more visual way). Also, if a function is short but is called many times it is easy to miss it, while on "aggregated" flame charts it would stand out prominently. To see why time-based flame charts are confusing, let me borrow example from another post - admittedly in Chrome, but the problem is similar:

enter image description here

Even if some function took 30% of total time, that would not be visible in the above chart.

Is there any way (through plugin or setting) I can make Firefox display aggregated flame charts for the selected time slice instead of time-based ones?


Solution

  • It seems that extending the DevTools is fairly limited, unless you're creating your own panel, but you don't really have access to the profiler in there to generate your Flame Graph.

    You can still save your recorded profile into a JSON file, parse it, and create your own Flame Graph that can calculate total aggregated runtime.

    You can also try the Gecko Profiler Add-on for some more advanced profiling. You'll be in the same boat though, in that you'd need to export it to do your own aggregations on the profile data.