Dealing with infinite loops

[Daniel LaLiberte]

One of the most tedious things to debug is infinite loops.  Sometimes the obstacle is figuring out where the code is looping, usually recursively, often causing a stack overflow in the process.  If I have the development tools open on the page already, I can click Pause, and it will usually get around to pausing before crashing, and then I can dig around and figure out what happened.

Then after I have made code changes and I am ready to reload the page to try again, it seems execution continues from where I paused before refreshing the page.  Of course, the loop is never going to finish, and pausing again is not going to help, so I am forced to kill the tab instead, and hope the process dies.  Sometimes I'll change the state of variables in a way that will cause an error, which will stop execution, but that's extra work and not always possible.    What I would like is a way to kill the execution definitively, just like an error does.

But also, the Chrome browser and development tools are not much help in discovering that there is an infinite loop before it gets so bad that the easiest thing to do is kill the whole tab, and even doing that can be a challenge while the CPU is still madly busy trying to get to the end of the loop.  It's difficult to get the developer tools open on a window if the loop kicks in before I have much of a chance of interrupting it.  But then I'll soon have to kill the tab along with its developer tools anyway because of the above.  No fun.   To address this, maybe we need to give higher priority to opening the developer tools, or maybe we just need a simple way of killing JavaScript on a page.  

Other ideas?  How do you deal with infinite loops?

[Daniel LaLiberte]

In Chrome 67, there is now a feature that will stop the current JavaScript call. See https://developers.google.com/web/updates/2018/04/devtools#stop

This is great, as long as you are paused in code that is part of the infinite loop itself.   So thanks very much for this!

But there are cases where the infinite loop is generated by another thread, for example, in a thread that repeatedly calls setTimeout, where most of the time is spent executing the function that setTimeout calls in a separate thread.  In this situation, it is difficult to pause in the loop that calls setTimeout, unless you know where it is and can add a breakpoint.   So it would be useful to have another feature that can Stop All JavaScript Calls, or maybe stop a particular thread by right-clicking on a frame of the Call Stack.  

Oh say, I see that there are some things available now by right-clicking on frames of the Call Stack.  You can Restart a frame, which seems kinda weird and makes me wonder what happens to state changes on arguments, and other side effects.  See https://developers.google.com/web/tools/chrome-devtools/javascript/reference#restart-frame  But anyway, this is where it would be handy to "Stop this thread" option, if it is not the current thread, and you know it is the one you want to stop.