Click here to Skip to main content
Click here to Skip to main content

Chrome developer tools profiling flame charts

, 12 Apr 2014
Rate this:
Please Sign up or sign in to vote.
CodeProjectI just recently, and totally coincidentally, found out that Chrome developer tools can generate flame charts while profiling js code!Recently it seems like generating flame charts from profiling data has become popular in languages like Ruby, python and php, so i'm excited to see that ch

Editorial Note

This article appears in the Third Party Product Reviews section. Articles in this section are for the members only and must not be used by tool vendors to promote or advertise products in any way, shape or form. Please report any spam or advertising.

I just recently, and totally coincidentally, found out that Chrome developer tools can generate flame charts while profiling js code!
Recently it seems like generating flame charts from profiling data has become popular in languages like Ruby, python and php, so i'm excited to see that chrome has this option for js code as well.

The default view for profiling data in the dev tools is the 'tree view', but you can easily change it to 'flame chart' by selecting it on the drop down in the bottom part of the window.

Like here :


Then you will be able to see the profiling results, in a way that sometimes is easier to look at.
You can use the mouse scroll button to zoom in on a specific area of the flame chart, and see what's going on there.

In case you're not familiar with reading flame charts, then here's a simple explanation -
  • Each colored line is a method call
  • The method calls above one another represent the call stack
  • The width of the lines represents how long each call was

And here you can see an example of a flame chart, and I marked a few sections that the flame chart points out for us, that are non-optimized TryCatchBlocks. In this case it's comfortable viewing it in a flame chart because you can see nicely how many method calls each try/catch block is surrounding.


License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Gilly Barr
Web Developer
Israel Israel
Started programming e-commerce sites with PHP & MySQL at the age of 14. Worked for me well for about 5 years.
 
Transfered to C# & asp.net, while serving in the IDF.
 
Currently working as a web developer for Sears Israel (SHC).
 
Check out my blog!

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 13 Apr 2014
Article Copyright 2014 by Gilly Barr
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid