blog
discuss
releases
documentation

Development Blog

Firebug 1.12 alpha 2

getfirebug.com has Firebug 1.12 alpha 2

Firebug 1.12a2 fixes 9 issues
Firebug 1.12a2 is compatible with Firefox 18-21

 

Some highlights from this release

  • Copying CSS properties into the clipboard improved (issue 5956)
    CSS Copy Actions
    You can also try an online test page.
  • JSON Inspector is available even if HTTP JSON response is empty (issue 6172)
    Empty JSON preview
  • Better API for Firebug extension developers (issue 6215)
    Hierarchical Menus
    Firebug API now allows to dynamically (no XUL) create hierarchical menus. See an example (bootstrapped) extension.

Jan ‘Honza’ Odvarko

Firebug 1.11.2 beta 1

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

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


Firebug 1.11.1

Firebug team released Firebug 1.11.1. This is a follow up release based on feedback we have collected since releasing 1.11.0

Firebug 1.11.1 fixes 3 issues.

  • Issue 6116: undefined values are ignored in string formatting of console.log
  • Issue 6119: Position of elements with `white-space: pre-wrap` isn’t displayed correctly
  • Issue 6124: Firebug add a new style tag with rules like .firebugResetStyles {} indefinitely.

Note that Firebug 1.11.1b1 has also been released to also update users on AMO beta channel. This version is the same as 1.11.1

 

Please post feedback in the newsgroup, thanks.

Jan ‘Honza’ Odvarko

Firebug 1.11.0

Firebug team is proud to announce final Firebug 1.11!

Firebug 1.11 is compatible with Firefox 17-20

Let’s start with a list of developers who contributed to this version (generated from our source repository and issue list):

  • Jan Odvarko
  • Sebastian Zartner
  • Simon Lindholm
  • Florent Fayolle
  • Steven Roussey
  • Farshid Beheshti
  • Harutyun Amirjanyan
  • Bharath Thiruveedula
  • Nikhil Verma
  • Antanas Arvasevicius
  • Chris Coulson

FWG (Firebug Working Group) is also regularly rewarding developers using donations made by Firebug users. Note that you can support us by making a donation here, thanks!

 

If you’d like to contribute code read post about Hacking on Firebug

 

New Features

Here is a brief list of top ten new features introduced in this release. If you are interested in more details take a look at this list with descriptions and screenshots.

You can also read our Firebug 1.11 release notes.

  • SPDY Support
  • Performance Timing Visualization
  • CSS Query Selector Tool
  • New include() command
  • Observing window.postMessage()
  • Copy & Paste HTML
  • Styled Logging
  • Log Function Calls
  • Improved $() and $$() commands
  • Autocompletion for built-in properties

Statistics

Some numbers related to this release.

  • 127 issues fixed
  • 40 enhancements implemented
  • 114 working days (since 1.10 release)
  • 25 automated tests created
  • About 5M new downloads (since 1.10 release)
  • More than 3.3M average daily users and growing

 

Update: Firebug 1.11.0b4 version has been also released to updated beta channel on AMO. This version is the same as Firebug 1.11.0

 

Stay tuned and follow us on Twitter.

Please post feedback in the newsgroup, thanks.

 

Jan ‘Honza’ Odvarko

 

Firebug 1.11 beta 3

Firebug 1.11 beta 3 has been released.

Firebug 1.11 beta 3 fixes 11 issues

Firebug 1.11 beta 3 is compatible with Firefox 16-19
 

Downloading Firebug from AMO beta channel is recommended. See Development Channel section at the bottom of the page.

This is the last 1.11 beta and the final release will be available next week.

 

Please post feedback in the newsgroup, thanks.

Jan ‘Honza’ Odvarko

 

Firebug 1.11 beta 2

Firebug 1.11 beta 2 has been released.

Firebug 1.11 beta 2 fixes 6 issues
Firebug 1.11 beta 2 is compatible with Firefox 16-19
 

Downloading Firebug from AMO beta channel is recommended. See Development Channel section at the bottom of the page.

 

We are mostly focusing on regression bugs, but one little enhancement made it to this release. The way how console logs can be styled using %c formatting variable has been enhanced. You can now use more style formatters in one log.

console.log("%cred %cblue", "color:red", "color:blue");

See detailed explanation of this feature.

 

Please post feedback in the newsgroup, thanks.

Jan ‘Honza’ Odvarko

 

Firebug 1.11 beta 1

Firebug 1.11 beta 1 has been released.

Firebug 1.11 beta 1 fixes 9 issues
Firebug 1.11 beta 1 is compatible with Firefox 16-19
 
Since we just switched into beta phase we appreciate any feedback from users as well as from Firebug extension developers!
 

All users running Firebug 11.1 alpha will be automatically updated. Note that downloading Firebug from AMO beta channel is recommended. See Development Channel section at the bottom of the page.

Couple of highlights from this release:

  • Copy & Paste HTML
  • Observing window.postMessage()

 

Copy & Paste HTML

It’s now possible to quickly clone entire parts of the HTML tree (in the HTML panel) by using Copy & Paste. Copy HTML action has been available for some time, but Paste HTML is new. Take a look at the following screenshot. The feature should be simple and clear. Note that XML and SVG is also supported!

You can check out the feature on our live test page.

Issue 5358

 

Observing window.postMessage()

Firebug 1.11b1 improves the way how message events, those generated by window.postMessage() method, are displayed in the Console panel.

The log now displays:

  • origin window/iframe URL
  • data associated with the message
  • target window/iframe object

See detailed explanation of the feature.

Issue 5135

 

Please post feedback in the newsgroup, thanks.

Jan ‘Honza’ Odvarko

 

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

 

Firebug 1.11 alpha 6

getfirebug.com has Firebug 1.11a6

Firebug 1.11a6 fixes 16 issues
Firebug 1.11a6 is compatible with Firefox 16-19

This is the last 1.11 alpha release and we are switching to the beta phase next week. The final Firebug 1.11 release will be available in December.


See some highlights from this release:

  • New include() command
  • Autocompletion for CSS Queries
  • Completion Popup Properly Aligned


New include() command

Firebug supports a new command called include(). This command can be executed on the Command Line (within the Console panel) and used to include a JavaScript file into the current page.

The simplest usage looks as follows:

include("http://code.jquery.com/jquery-latest.min.js")


If you often including the same script (e.g. jqueryfying your page), you can create a handy alias.

include("http://code.jquery.com/jquery-latest.min.js", "jquery")

Now you can execute just: include("jquery") to include the same script into the current page.


In order to see list of all defined aliases, type: include(). Note, that aliases are persistent across Firefox restarts.


In order to remove “jquery” alias, type: include(null, "jquery")

(issue 5878)


Autocompletion for CSS Queries

If you deal with CSS you might be often interested which elements actually match specific CSS selector. For this, Firebug offers an Elements side panel, which is available in the CSS panel and now it also supports autocompletion.


Elements side panel autocompletion


Just start typing into the inline editor and Firebug will offer all element names and CSS classes that are available on the page. It’s smart so, if you use element name in your selector it’ll offer only classes that are available for that element.

(issue 5989)


Completion Popup Properly Aligned

This is one of the nifty improvements that makes Firebug a handy tool. The auto-completion popup window is now displayed at the right position – aligned with the expression typed by the user.



Please post feedback in the newsgroup, thanks.

Jan ‘Honza’ Odvarko