How to debug javascript when it goes into infinite loops and recursive calls in Javascript?

Question

When you are in the infinite loop or recursive calls, basically the browser stops responding to anything (either on Chrome or FF). You cannot see logs, cannot get into debug

Answer 1

I had issues in Chrome, I would see in the browser window 'Paused in debugger' but couldn't see where as maybe Chrome was confused since it was in a loop ... In Firefox, it recognized its taking too long and then a popup comes up after 30seconds to 1minute saying the file and general line # its frozen on which helps out to debug further and set Breakpoints around that area.

Answer 2

Found another way of debugging. In my case the error was caught and so no errors where logged to the console. Found the bug with the checkbox Pause on caught exceptions. You find the option in den dev tools unter the Sources tab. To show and enable the checkbox click on the last icon:

After enabling this, the debugger pauses on every caught exception.

Answer 3

Another trick you could try is to have the Web developer tools in Chrome open and try to hit Pause when the Browser apparently hangs. Then it should break at the line where it's currently executing. With some stepping out you should get to the bottom of this.

Assuming you know (or suspect) the function where the infite loop happens you could add code like this:

var calls = 0;
function iSuspectToBeLoopingInfititely() {
  calls += 1;
  if (calls > 100) { debugger; }
}

This will stop the JavaScript debugger in Chrome once the method has been called 100 times. Note: Chrome will only break for debugger; calls if you actually have the Developer Tools window open.