What are the remended ways to check for infinite loops in javascript in the browser? Say I open Chrome and it crashes, is there a way to breakpoint or somehow pinpoint where that occurred?

Then I'm wondering, how do I see a running list of the executing scripts in the browser (say some timer I lost track of is running and it's slowing things down)? Preferably in Chrome/Safari, but Firefox would work too.

I use the element inspector/console all the time, I just haven't figured out ways to effectively debug these 3 things.

Thanks!

What are the remended ways to check for infinite loops in javascript in the browser? Say I open Chrome and it crashes, is there a way to breakpoint or somehow pinpoint where that occurred?

Then I'm wondering, how do I see a running list of the executing scripts in the browser (say some timer I lost track of is running and it's slowing things down)? Preferably in Chrome/Safari, but Firefox would work too.

I use the element inspector/console all the time, I just haven't figured out ways to effectively debug these 3 things.

Thanks!

• javascript
• debugging

2 Answers 2

1. Memory leaks

• Microsoft JavaScript Memory Leak Detector (IE)
• Drip (IE)
• Leak monitor (FF)

2. Inifinite loops

I don't exactly understand what the browser could point you to in the case of plex infinite loop spreading across hundreds of functions. Sure, I'd love the browser to pinpoint simple loops like some function not returning for 15 seconds. But at least we have something, browser tells you a) that script is running slow, and b) what functions were called and how much time each one took. Also, you can set a breakpoint and watch it run step by step.

3. Monitoring timers and intervals

Open WebKit's timeline panel, hit "Record" and monitor everything you might want to know about each timer and interval. If you're not using WebKit you can code something simple yourself:

_setTimeout = setTimeout
setTimeout = function(fn, time) {
  var timeout = _setTimeout(function() {
    console.log('Timeout #' + timeout + ' fired on ' + (fn.name || 'anonymous'))
    fn()
  }, time)
  return timeout
}

Usually I simply make document.title blink when timeout/interval fires.

4. General code performance

• Speed Tracer for Google Chrome
• Firebug Paint Events for Firefox
• Javascript Performance Monitor - a little infobox that will help you monitor FPS and memory allocation

For a script that crashes the browser, you can insert a breakpoint anywhere in your code before it crashes. Then just manually step through all the code until it crashes. If you are unable to insert the breakpoint before the browser crashes, you can add the "debugger;" statement somewhere in your code. That basically inserts the breakpoint at that point in the code.

One way to see what's being run from your JS is to profile it. All the dev tools e with a profiler. Just profile your code for a few seconds after the page loads, and it would give you a glimpse of what's still running. If you are using a library such as jQuery, you would see a lot of internal jQuery functions and some of your own. Look at the function that takes the most running time (per call) and try to minimize their usage, as those are the most costly.

If you have an infinite loop in the "non-threaded" JS, then your page wouldn't load fully at all. Firefox should tell you the script is taking long time to load and let you debug it (which would show you where it is). For "threaded" JS (ones that's run from a callback or setTimeout), you could track them with the profiler.