Debugging closures in javascript

Question

When I try to debug the javascript code which has a lot of closures I use to put a breakpoints.

Then I go to see the stack but most of the times I just see a call stack full of anonymous functions which is a nightmare for me.

What is the best way to debug closure in javascript?

it depends completely on what the problem is...can you be more specific? — hvgotcodes
– hvgotcodes, Commented Feb 21, 2012 at 14:54

Davide · Accepted Answer · 2012-02-21 14:54:34Z

5

You can add a name to the callback function. That way the function name will be shown during debugging.

As an example in jQuery

$('div').each( function divLoop() {
  ..
});

In OOP Javascript, it's common to call the function as the name of the method

MyClass.prototype.methodName = function methodName() { ... }

answered Feb 21, 2012 at 14:54

Davide

2,3391 gold badge14 silver badges12 bronze badges

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

Comments

Didier Ghys · Accepted Answer · 2012-02-21 14:54:41Z

2

Well, in Google Chrome, you can see variables content throughout closures:

enter image description here

Local is the current execution context
Closure is its enclosing execution context
...
Up to the global execution context

answered Feb 21, 2012 at 14:54

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

jbabey · Accepted Answer · 2012-02-21 15:08:29Z

1

Instead of providing anonymous functions as your callback, try declaring a function and use that instead.

This way you can debug inside of the callback function just like a normal function call.

answered Feb 21, 2012 at 15:08

jbabey

46.7k12 gold badges73 silver badges94 bronze badges