CODEWITHSUNDEEP
javascriptdebugginggoogle-chrome-devtoolsfirefox-developer-tools
lkahtz
lkahtz

Reputation: 4796

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

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 debugger, even you cannot open the console itself. The browser just simply freezes. This is so annoying. It seems I can do nothing but sitting here scratching my head... Anyone can shed light on how to solve this?

Upvotes: 61

Views: 37834

Answers (5)

Boghyon Hoffmann
Boghyon Hoffmann

Reputation: 18054

Chromium browsers

If the UI is stuck infinitely and you don't know in which script the JavaScript engine is busy, simply click on the Pause script execution button from DevTools (Doesn't work in Firefox):

Chromium "Pause script execution"

When paused, set a new breakpoint on the stopped line and continue. You can see that the breakpoint hits again and again.

Firefox

Firefox might additionally show a banner if you try interacting with the frozen UI. You can then click on "Debug Script" to see which parts of scripts are being executed endlessly.

Firefox "Debug Script"

Upvotes: 0

Omar Shishani
Omar Shishani

Reputation: 509

I solved this by placing Chrome breakpoints along all functions in the function file that I knew was causing the issue. I started with one debugger in the file so the execution would stop, which made it easier to add the chrome breakpoints.

Click the code numbers on the left side of the source file in Chrome Dev Tools "Sources" tab to add a blue debugger breakpoint. Place several of these and you can use the command buttons at the top right of the Sources tab dash to step through the functions. You can even add console.log items that will run on each time you step through.

Additionally, note that at any point in the paused execution, you can switch to the "Console" tab and type the name of any variable or function, and you'll get the current value of that variable or function.

enter image description here

Upvotes: 1

crashbus
crashbus

Reputation: 1714

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:

enter image description here

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

Upvotes: 8

armyofda12mnkeys
armyofda12mnkeys

Reputation: 3442

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.

Upvotes: 1

Tigraine
Tigraine

Reputation: 23648

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.

Upvotes: 92

Related Questions