Finding an infinite (or very large) loop in JavaScript using Chrome Dev Tools

Question

I'm using a third party statistics library which seems to have loads of issues. It's both large and compressed, so it's not particularly easy to debug. I'm using the Chrome Dev Tools and I was wondering what options there might be for ranking functions by the number of calls by their name, maybe? I thought the answer was the Profiler tab, but the profiles I captured are only documenting the JS files referencing "line 1" in long chains.

This thing is freezing my app and I'd rather avoid making changes to their code as much as possible, even if its for the sake of debugging. I'm happy to clarify anything that's not clear.

EDIT: I seem to remember a recent demo of chrome dev tools somewhere showing a timeline that depicted function blocks stacked vertically based on the time increment going horizontally called "flame charts" or something similar... That would be ideal, but I can't remember the link right now for the life of me. Not opposed to using Canary on this one at all if anyone knows what this tool is?

Answer 1

The latest video about DevTools is here http://youtu.be/x6qe_kVaBpg?t=19m44s

It covers different topics about DevTools and includes a section about CPU profile too.

So, you need to record a cpu profile and look into it.

Also you can use FlameChart view on it.

You can click on an item in BottomUp or TopDown or even a FlameChart bar and see the function body in the Sources panel.

If you sources are minified, as in the screenshot, then you can press a button in the status bar of Sources panel. It looks like two curly braces {}. Then DevTools will format the sources.

and that action will affect all the links to the source file in all other places like Timeline, CPUProfile etc. As example in the first snapshot you saw a function O.Pk that was at line 778 of minified version of the script. After pretty printing the source file the link to the function was changed automatically. Now it is pointing to the line 15871.

Answer 2

Looks like the answer is the "Timeline" tab. Seems to work in regular chrome. I set the tab to record just before I triggered the action that caused the hang, once the hang stopped (took about 20 seconds), I stopped recording and used the left and right selectors to zoom in on the master timeline (at the top) where I saw an longer execution period (at the top) with "Events" selected.

From there I just expanded the dropdown and I got what I was looking for. (I blurred out the js filenames to avoid singling out the library) but I'm including a screenshot.