Web Inspector: support flame graph and/or flame chart visualization of CPU profiles

• Component: Web Inspector
• Status: NEW ---

[Paul Irish]

Is there an opportunity to provide a visualization to explore profiling data?

The flame graph here is one example.. http://dtrace.org/blogs/dap/2012/04/25/profiling-node-js/

Perhaps there are other good directions that could better illuminate where cycles are being spent

[Paul Irish]

Additional link on flame graphs: http://dtrace.org/blogs/brendan/2011/12/16/flame-graphs/

[Patrick Mueller]

We should export the profiling data via the extension API, if we don't already.  Then you could write explorations as extensions.

Another option would be to handle this like the HAR reports.  

Is there some standard perf reporting format that people use?

[Brian Burg]

Migrating component for this feature request.

[Radar WebKit Bug Importer]

<rdar://problem/18194091>

[Iraê]

This is somewhat forgotten here, but other browsers already have this working. Chrome for quite a while and Firefox added recently. Looking at the timeline tab on WebInspector and the raw data from Chrome, looks like very similar, so WebKit might be able to port some code from Blink.

The Chrome team put up a very interesting, albeit a bit out dated, documentation about not only how to use the profiles tab on the browser but also how to interact with custom markers. Those marker were used by us on the Yahoo Search team and are super valuable in addition to regular browser events.

https://developer.chrome.com/devtools/docs/console#controlling-the-cpu-profiler

Also, Chrome advocates put up additional information in their own blogs and/or community websites like HTML5Rocks:

http://addyosmani.com/blog/devtools-flame-charts/
http://www.html5rocks.com/en/tutorials/developertools/novdigest/

Mozilla also have some interesting and slightly different approach. Those are largely the same tools, with different ways of rendering the same data:

https://developer.mozilla.org/en-US/docs/Tools/Performance/Flame_Chart

In closing, I would very much like to see this feature, specially for remote debugging actual iOS devices over USB. Different CPU architectures might yield different results, even if not that relevant, but having official support in webkit and eventually in Safari Mobile would be a huge improvement for mobile development. Specially since for many products iOS Mobile Safari has a huge percent of total daily active users.

[Timothy Hatcher]

*** Bug 140943 has been marked as a duplicate of this bug. ***

[Brendan Gregg]

RE Iraê comment: Chrome and other browsers do not have flame graphs. They have flame charts.

Since Bug 140943 has been closed as a duplicate, than this ticket is for flame graphs.

[Iraê]

From the bug you mentioned: "Flame Charts: x-axis shows the passage of time." 

Yes, that's what I mean to ask Flame Charts. 

Interestingly Bug 111162 says Flame Charts has landed and resolution is "fixed". I never found either flame charts or flame graphs on WebInspector.

I would say both would be very good additions to WebInspector. Looks like to me, the data is available for Flame Charts, which would be easier to implement.

Also, Flame Charts will make slightly more sense if the place webkit choses to place it is the timeline view, since it's already filtered by timespan.

Question is: Do we need a new bug# for charts? It seems it was landed on the deprecated version and never ported to the current version of WebInspector.

[Blaze Burg]

(In reply to comment #8)
> From the bug you mentioned: "Flame Charts: x-axis shows the passage of
> time." 
> 
> Yes, that's what I mean to ask Flame Charts. 
> 
> Interestingly Bug 111162 says Flame Charts has landed and resolution is
> "fixed". I never found either flame charts or flame graphs on WebInspector.

That bug was for the old user interface. It's the one in Chrome Devtools, which is a separate codebase now.

> I would say both would be very good additions to WebInspector. Looks like to
> me, the data is available for Flame Charts, which would be easier to
> implement.

Don't they require the same data, just sorted differently?

> Question is: Do we need a new bug# for charts? It seems it was landed on the
> deprecated version and never ported to the current version of WebInspector.

Correct, but I would not file a new bug yet. We haven't worked on this in a while, and not sure whether flame chart or flame graph would make more sense (or both).

[Brendan Gregg]

(In reply to comment #9)
> (In reply to comment #8)
> > From the bug you mentioned: "Flame Charts: x-axis shows the passage of
> > time." 
> > 
> > Yes, that's what I mean to ask Flame Charts. 
> > 
> > Interestingly Bug 111162 says Flame Charts has landed and resolution is
> > "fixed". I never found either flame charts or flame graphs on WebInspector.
> 
> That bug was for the old user interface. It's the one in Chrome Devtools,
> which is a separate codebase now.
> 
> > I would say both would be very good additions to WebInspector. Looks like to
> > me, the data is available for Flame Charts, which would be easier to
> > implement.
> 
> Don't they require the same data, just sorted differently?

Same data, sorted differently.

> 
> > Question is: Do we need a new bug# for charts? It seems it was landed on the
> > deprecated version and never ported to the current version of WebInspector.
> 
> Correct, but I would not file a new bug yet. We haven't worked on this in a
> while, and not sure whether flame chart or flame graph would make more sense
> (or both).

Both would be best, with a toggle between them. Each can be used to attack different kinds of issues.

There may well be other orderings and visualizations for the same dataset we figure out later, for revealing even more issues. (Some of us have done flame graph differentials, for example, for comparing two profiles.)