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 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 dropdown in the bottom part of the window.
Like here:
<img src="758791/open_flamechart.png" style="border-width: 0px; border-style: solid; height: 430px; width: 640px;" />
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.
<img src="758791/flamechart.png" style="border-width: 0px; border-style: solid; height: 128px; width: 640px;" />
