Visualize Google Chrome JavaScript CPU profiles using Blackfire

The following feature is deprecated as of 2017-09-08, and will not work anymore.

Debugging and profiling Javascript applications in a modern browser is a lot easier than it used to be. For instance, Google Chrome gives you the ability to get a CPU profile of a running application:

On any page, “start” a profile, interact with the page to trigger some JavaScript work, and finally “stop” it; you can then have a look at the profile:

As you can see on the screenshot, it’s not easy to figure out what’s going on. As of version 0.22of the Blackfire CLI package, you can import Google Chrome CPU profiles on Blackfire to benefit from its call graph display.

From the browser, save the profile on disk and use the Blackfire CLI tool to upload it:

blackfire --slot 3 upload temp.gring

I’ve tested this methodology by taking a CPU profile of SensioLabsInsight displaying a quality report (note that you get better results if you profile a page where the JavaScript files are not minified/compressed):

Switching to the CPU tab and tweaking the display options gives you a better understanding of what’s going on (as the idle time is filtered out):

Support for this feature is still experimental and we are aware of one problem: when your graph is cyclic, which happens quite often, the inclusive times are wrong. The good news is that we are working on a new algorithm which will fix this issue. I will write about that algorithm soon in another post.

The only requirement to make it work is the Blackfire CLI tool. Installing it is well documented on the new docs about importing Google Chrome CPU profiles.

Happy profiling!