How do I Debug Memory Leaks, Infinite Loops, and Executing Javascript in the Browser?

Question

What are the recommended 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!

Alexey Lebedev · Accepted Answer · 2011-02-23 22:15:31Z

11

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 complex 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

edited Feb 23, 2011 at 22:15

answered Feb 23, 2011 at 18:42

Alexey Lebedev

12.2k4 gold badges42 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tobek Over a year ago

+1 for overriding setTimeout. If you change that console.log to console.error then you'll get a stack trace for each call as well! Assuming your browser (as Chrome does) can follow the stack across async calls.

voidvector · Accepted Answer · 2011-02-23 19:17:17Z

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 come 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.

Collectives™ on Stack Overflow

How do I Debug Memory Leaks, Infinite Loops, and Executing Javascript in the Browser?

2 Answers 2

1. Memory leaks

2. Inifinite loops

3. Monitoring timers and intervals

4. General code performance

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1. Memory leaks

2. Inifinite loops

3. Monitoring timers and intervals

4. General code performance

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related