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

Question

I am using a third-party statistics library, which seems to have a lot of problems. It is both large and compressed, so it is not very easy to debug. I use Chrome Dev Tools, and I was wondering what options 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 that I captured only document JS files that reference "line 1" in long chains.

This thing freezes my application, and I would prefer to avoid making changes to their code as much as possible, even if it is necessary for debugging. I am happy to clarify everything that is unclear.

EDIT: I seem to remember a recent demo of chrome dev tools somewhere showing a timeline depicting function blocks stacked vertically based on time increments running horizontally, called “fiery charts” or something like that ... That would be ideal, but I can’t remember the link right now for life. Would you mind using Canary on this at all if anyone knows what kind of tool it is?

Answer 1

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

It covers various topics about DevTools and includes a section on the CPU profile.

So, you need to record cpu profile and study it.

You can also use the FlameChart view on it.

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

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

and this action will affect all links to the source file in all other places, such as Timeline, CPUProfile, etc. As an example, in the first snapshot, you saw the O.Pk function, which was on line 778 of the shortened version of the script. After beautifully printing the source file, the link to the function was changed automatically. Now it points to line 15871.

Answer 2

It seems like the answer is the Timeline tab. It seems to work in plain chrome. I set the tab for recording just before I called the action that caused the freeze, after the freeze stopped (took about 20 seconds), I stopped recording and used the left and right selectors to increase the scale timeline (at the top) where I I saw a longer execution period (above) with the selected "events".

From there, I simply expanded the drop-down list and I got what I was looking for. (I blurred the js file names so as not to highlight the library), but I include a screenshot.