blog
discuss
releases
documentation

Archive for November, 2012

Firebug 1.11 beta 3

Friday, November 30th, 2012

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

Friday, November 16th, 2012

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

Friday, November 9th, 2012

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

Wednesday, November 7th, 2012

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

Friday, November 2nd, 2012

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


Firebug 1.10.6

Thursday, November 1st, 2012

Firebug team released Firebug 1.10.6

Firebug 1.10.6 is a maintenance release fixing compatibility problem with Firefox 15. This problem caused the Start Button to disappear from Firefox 15 toolbar. It’s now fixed (see more details in issue 6043).

Please post feedback in the newsgroup, thanks.

Jan ‘Honza’ Odvarko