Inspect
Pinpoint an element in a webpage with ease and precision.
Log
Send messages to the console direct from your webpage through Javascript.
Profile
Measure your Javascript performance in the Console's Profiler.
Debug
Step-by-step interactive debugging in a visual environment.
Analyze
Look at detailed measurements of your site's network activity.
Layout
Tweak and position HTML elements with CSS and the Layout panels.

Recent news

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


Firebug 1.10.6

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

Read more blog posts on the Firebug weblog »