Visualize Google Chrome JavaScript CPU profiles using Blackfire

By Fabien Potencier, on Mar 11, 2015

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:

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!

Fabien Potencier

Fabien Potencier is the CEO and founder of He founded the Symfony project in 2004 as he constantly looked for better ways to build websites. Fabien is also the creator of several other Open-Source projects, a writer, a blogger, a speaker at international conferences, and the happy father of two wonderful kids.