blog
discuss
releases
documentation

Development Blog

FireClosure – JavaScript Closure Inspector

FireClosure is one of the Firebug extensions that should certainly deserve more attention. It’s nicely integrated within the existing Firebug UI (we are actually thinking of building the extension directly into Firebug) and its purpose is to inspect JavaScript closures.

Author of the extension is Simon Lindholm.

 

Example

First of all, let’s see a simple example:

var PersonFactory = function(name, age)
{
    return {
        getName: function() { return name; },
        getAge: function() { return age; },
    };
};

var person = PersonFactory("Bob", 58);

Now, let’s imagine we want to inspect the person object. It’s actually not that simple since the object doesn’t have any properties. It has only two functions that are using a closure and accessing variables (arguments) passed into the PersonFactory function.

So, we can’t execute the following expression on Firebug Command line:

person.name <- DOES NOT WORK

However, if you have FireClosure installed, you can use the following syntax:

person.%name

Optionally, FireClosure integrates also with the DOM panel, see the next screenshot.

There is a new section (scoped variables) that is displaying all the local variables in the closure.
 
Finally, you can also use the Watch side panel to inspect closures.

Note that the syntax is also available in watches and breakpoint condition editors.
 

Caveats

  • Firefox often optimizes away closures or variables. For debugging, you can temporarily add some evals around the relevant places in the code to make this less of a problem (also makes your code less performant).
  • Some objects might have unexpected scopes. This is because non-function objects don't actually have scopes in the first place; the functionality is faked by using the first property with typeof === 'function' that appears on the object.

 

Feedback

We are keen to get feedback for this feature, please let us know what you think.

  • Is there anything we could improve?
  • Do you like the syntax extension .%?
  • Should we build the feature directly into Firebug?

 

Please post feedback in the newsgroup, thanks!

Jan 'Honza' Odvarko

 

One Response to “FireClosure – JavaScript Closure Inspector”

  1. Dew Drop – November 7, 2012 (#1,438) | Alvin Ashcraft's Morning Dew Says:

    […] FireClosure – JavaScript Closure Inspector (Jan ‘Honza’ Odvarko) […]