blog
discuss
releases
documentation

Archive for January, 2013

Firebug 1.11.2 beta 1

Friday, January 18th, 2013

Firebug 1.11.2 beta 1 has been released.

Firebug 1.11.2 beta 1 fixes 12 issues
Firebug 1.11.2 beta 1 is compatible with Firefox 17-20
 

All users subscribed to AMO beta channel will be automatically updated. See the Development Channel section at the bottom of the page.

 

The main new feature we have introduced in this release is called Closure Inspector. It’s been previously implemented as an extension (FireClosure), but is now integral part of Firebug. So, you should uninstall the extension if you have it in your Firefox.

 

We have already published couple of blog posts explaining the Closure Inspector in detail so, take a look and let us know what you think.

 

Please post feedback in the newsgroup, thanks!

Jan ‘Honza’ Odvarko

 

Firebug 1.12 alpha 1

Friday, January 11th, 2013

getfirebug.com has Firebug 1.12a1

Firebug 1.12a1 fixes 17 issues
Firebug 1.12a1 is compatible with Firefox 18-21

This version integrates FireClosure inspector and introduces new Closure Inspector feature.

Closure Inspector

Close Inspector feature is nicely integrated within Firebug UI and can be used to inspect JavaScript closures. Let’s see a few examples demonstrating how to use it.


In order to inspect JS closures in the DOM panel, you need to check Show Closures option.

showclosures-option

Example 1

The first example shows a simple function MyFunc that is using one variable a from a closure.

(function () {
    var a = 1;
    window.myFunc = function MyFunc() {
        return a;
    };
})();

And this is what you can see in the DOM panel.

closures-example1

The variable is not direct property of myFunc and so you need to expand (closures) to see it.


Example 2

The next example shows another closure with two variables closed over.

function getSumFunc(a, b) {
    return function() {
        return a + b;
    }
}
var sum = getSumFunc(1, 2);

The DOM panel displays following:

closures-example2

That’s what we would expect so, let’s see how to inspect the same closure in the Console panel.

closures-autocompletion

If your type sum.% you’ll get access to closure variables and there is even a popup suggesting what variables are available.


Example 3

JavaScript closures can be nested and compose a tree of closures. Let’s see how the DOM panel cope with such scenario.

First, here are two nested closures, each defining one variable.

(function(a) {
    var a = 1;
    (function() {
        var b = 2;
        window.sum = function Func() { return a + b; };
    })();
})();

And here is what you can observe in the DOM panel.

closures-example3



This feature is in its alpha phase, but we are thinking about including it into the current Firebug 1.11 so, please post feedback in the newsgroup, thanks!

Jan ‘Honza’ Odvarko