57

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?

lkahtz
  • 4,706
  • 8
  • 46
  • 72
  • 3
    Set a breakpoint in the debugger before the loop is started? – PhonicUK Oct 10 '12 at 09:17
  • @PhonicUK sometimes is not possible, such as a slider where only one value causes infinite loop and you don't want to stop at all intermediate values. – cdalxndr Sep 19 '20 at 22:48

4 Answers4

90

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.

Tigraine
  • 23,358
  • 11
  • 65
  • 110
10

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.

crashbus
  • 1,678
  • 18
  • 37
  • 3
    offtopic, doesn't answer OP question – cdalxndr Sep 19 '20 at 22:49
  • @cdalxndr Why should this be offtopic? It can help exactly in this situation "the browser stops responding to anything (either on Chrome or FF). You cannot see logs, cannot get into debugger..." Actually it helped me in this situation! – crashbus Sep 29 '20 at 09:52
  • the OP asked for infinite loops, not exceptions. Infinite loop doesn't throw exception. – cdalxndr Sep 30 '20 at 10:53
  • A caught exception can lead into an infinite loop when the abort criteria isn't hit from a loop! – crashbus Oct 01 '20 at 09:18
  • If a caught exception leads to an infinite loop, then it is bad programming.The point of catching exceptions is to handle them and fix invalid behaviors, so they will not cause infinite loops! – cdalxndr Oct 01 '20 at 16:34
  • Arguably, also bad programming leads to infinite loops, so if you edit your answer and add a valid example related to OP's question, I will remove my downvote – cdalxndr Oct 01 '20 at 16:43
  • This answer is over 2 years old. The example i run into was over multiple functions and framework code with some blur and focus stuff of an input element as i remember correctly. It is not always obvious that you are in a loop... In this question it is not ask for an example of an infinite loop. It is asked for a possibility to debug this! – crashbus Oct 01 '20 at 21:09
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.

armyofda12mnkeys
  • 3,214
  • 2
  • 32
  • 39
  • 1
    Chrome handles infinite loops very poorly imho, if it has one while the debugger is open it should not lock the deveoper out. – Dirigible Sep 17 '18 at 02:40
  • This seems very useful, all though I'm unlucky! (?) it doesn't seem to go into any infinit loop in firefox, only in chrome and safari :/ – OZZIE Aug 07 '20 at 07:38
1

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

Omar Shishani
  • 379
  • 3
  • 8