Firefox是否支持显示聚合型火焰图以分析JavaScript应用？

Great question! I totally get your frustration with timeline-based flame graphs—they’re not great at highlighting functions that run frequently but for very short durations, even if their total execution time adds up to a significant chunk of your profiling window. Let’s break down how you can get the aggregate view you want in Firefox:

1. Use Built-in Panels for Aggregated Data #

First, you don’t need a plugin to see aggregated function times—Firefox DevTools already has two panels that solve this core problem:

• Call Tree: This groups functions by their call stack, displaying both total time (including time spent in child functions) and self time (time spent directly in the function) for each entry. It’s exactly the aggregated data you’re looking for, just presented in a tree structure instead of a flame graph.
• Bottom-Up: This sorts functions by total execution time (highest to lowest), making it easy to spot the most expensive functions at a glance, no matter where they sit in the call stack.

While these aren’t visual flame graphs, they eliminate the issue of short-but-frequent calls being lost in timeline noise.

2. Third-Party Plugins for Aggregate Flame Graph Visualization #

If you specifically want the intuitive flame graph visualization with an aggregated X-axis (percentage of total time), community-built extensions can add this functionality. Head to the Firefox Add-ons Store and search for terms like:

• "Aggregate Flame Graph"
• "Profiler Aggregate View"

These plugins hook into Firefox’s profiling data and render it as a traditional aggregated flame graph, similar to pyflame or Brendan Gregg’s implementations.

3. Export Data to Generate Aggregate Flame Graphs Externally #

If you prefer using external tools, you can export your profiling data and generate an aggregate flame graph locally:

1. In the Performance panel, after recording your session, click the Export button (top-right corner) to save the data as a JSON file.
2. Convert the Firefox JSON format to a structure compatible with standard flame graph tools (open-source scripts are available to handle this conversion).
3. Use tools like Brendan Gregg’s flamegraph.pl script to generate an SVG aggregate flame graph from the converted data.

This approach gives you full control over the visualization and works well if you’re already familiar with external flame graph workflows.

To echo your point about timeline flame graph limitations: even if a function uses 30% of your total execution time, it can be nearly invisible in a timeline view if split into hundreds of tiny calls. Aggregate views fix this by grouping all those calls together, making the true cost immediately obvious.

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