Archive for the 'Firebug Docs' Category

New Firebug Wiki

Wednesday, October 21st, 2009

Rob ‘robcee’ Campbell arranged for to have its own wiki and Hernán Rodríguez Colmeiro has started it up with a lot of great content.

Check it out, help out. Don’t be shy: if you know just a little about Firebug, your perspective is valuable for the person who may know less.


Please followup in the newsgroup.

javascript.options.strict and performance

Tuesday, September 8th, 2009

I fought another javascript.options.strict problem:

  • Issue 2288: FB hangs and raises CPU to 100% due to getStyleSheetByHref

In case you don’t know, javascript.options.strict is supposed to warn you about problems in your code.  Unfortunately it also warns you about non-problems in you code.  In the particular case above, this line of Firebug code was causing the warning:

return context.styleSheetMap[url];

The intent of this line is clear: return the entry of the styleSheetMap at the key url and if the map has no entry there, return undefined. But the strict option does not like this javascript idiom and reports a warning if the function returns undefined.

(The line above is dubious but for a completely different reason: if the url were accidentally equal to a built-in property of javascript objects, then the function would return an incorrect value).

The bug here is that the strict option has no scope controls and no selection controls: once you turn it on, it applies to the entire browser and all of its rules are active.  So all of Firebug’s warnings and all warnings from other AJAX pages get mixed with the warnings from your web page. And the overhead of processing these warnings can be quite high. I recommend that you set javascript.options.strict false using url about:config or Firebug Console panel option “Strict Warnings” (unchecked).

If you like these kinds of extra checks on your code, take a look at JSLint.  It is well supported, well documented, has lots of options and different ways of setting them, and it can be applied to just the code in your page.


Please post followups in the newsgroup.

Give your eval a name with //@ sourceURL

Tuesday, August 11th, 2009

The first Firebug feature I worked on was a whopper: eval() debugging.  One of the challenges is how to name the source code buffer.

By default Firefox names the eval() buffer using the containing filename. This is a disaster:  it’s the debugger equivalent of overstrike: eval functions overlap orginal functions.

Coming up with an alternative is not so easy. The name has to uniquely identify the buffer to support breakpoints and yet be understandable by developers. The Firebug default is to compute an MD5 hash for the buffer then show the developer a string related to the calling file and the source.

Firebug also supports developer-named eval() buffers: just add a line to the end of your eval(expression) like:

//@ sourceURL=foo.js

This makes the source appear to come from the calling domain at file foo.js. The syntax of the line needs to match this regular expression:

const reURIinComment = ///@ssourceURL=s*(S*?)s*$/m;

sroussey points out that this feature has recently been added to Webkit so it should also work in Safari.


Followup in the newsgroup please.

Firebug 1.4 Activation

Monday, July 20th, 2009

Firebug users like to mix debugging with web browsing. Since debugging can take up lots of machine resources, Firebug  supports ways for users to control the amount of resource and when that resource is used. In Firebug 1.4 there are two mechanisms:

  1. Web pages can be active or inactive.
  2. The panels Console, Script and Net can each be disabled or enabled.

We’ll just look at the activation part here. See Honza’s post for more info and the panel enablement.

Firebug maintains a whitelist and a blacklist of activation URIs.

  • greybug When you open Firebug, the selected Firefox tab has its activation URI is added to the whitelist.
  • 1.4.0-window-controls When you push the Firebug Off button,  the selected Firefox tab has its activation URI added to the blacklist.

The mapping of web page URI to activation URI is controlled with the option Activate Same Origin URL:


If you have Activate Same Origin URL checked (ON, the default), then the activation URI is created by taking the top two level of domain from the host portion of the the web page URI’s prepath. For example, would have an activation URI of

If you have Activate Same Origin URL unchecked (OFF), then the activation URI is the web page URI. In this case, Firebug also looks at links you click: if they have the same host as an active page, the resulting page will be placed on the whitelist and thus becomes active.

User commands (On) is stronger than Blacklist; Blacklist is stronger than Whitelist.

The lists are implemented as page annotations named firebug/history; the black list has annotation firebugged.closed; the whitelist has annotation firebugged.showFirebug.


Please post followups to the newsgroup.

Minimizing Firebug 1.4

Wednesday, July 15th, 2009

This is an update of the “Minimizing Firebug 1.4a22” post back in April.

“Minimizing” Firebug means that the Firebug user interface is hidden but all of the function of Firebug is active.  As far as we know, the two major use cases for this feature are

  1. To check the full page design,
  2. To monitor pages for errors.

In the “check the design” case, the user may rapidly alternate between minimized and unminimized, so Firebug 1.4 wants this toggle to be simple.

There are three ways to minimize Firebug: 1) Statusbar icon, 2) keybinding, 3) icon.

  1. If you start with Firebug closed, the status icon will be grey: greybug If you click it, Firebug will open and (if you have the panels enabled) the icon will be orange:orangebug Another click on the status bar icon will minimize Firebug; the icon will remain orange since Firebug is still running.  More clicks will alternate between restoring the Firebug UI and minimizing it.
  2. If you use the default key binding, F12 (function key twelve), will fire the same event as the status bar icon click
  3. The upper right hand menu has a new icon set, 1.4.0-window-controls, the first icon, [_] minimizes Firebug. The second icon, the overlapping windows means detach Firebug into a standalone external window, but you can also think of it as “Maximize Firebug”, since mostly folks use it to get more screen size for Firebug. The last one, offActive Off, means “Turn  Firebug Off ” for this page.

Notice that On and Off are not toggles in Firebug 1.4: you use the statusbar icon to turn  On a page and the offActive icon to turn it off. That is because the Off destroys any data Firebug has saved for the page.  So we deliberately use different buttons in different places for these functions.

If you are a 1.3 Firebug user, you may be accustomed to a red [X] icon in the upper right corner that implemented minimize. The offActive Off button in the upper right does not implement minimize in Firebug 1.4.


Please followup on the newsgroup.

1.4: you have to manually reload the first time

Friday, July 3rd, 2009

Based on newsgroup postings, users did not get the news that Firebug 1.4 requires a manual reload the first time you open it on a site. Ok, no I don’t know how they would know. So here it is:

In 1.4, when you open Firebug on a page it does not automatically reload the page. You have to do it manually.

In 1.3, the page was reloaded for you. We made this change because some users (ok it was Steve ;-), complained that the reload was not always necessary and sometimes wastes time. This is especially true for users who are primarily interested in HTML and CSS or for users who want to know just when the reload is triggered so they can watch how the page loads.

But why do we need to reload at all? Well to track net traffic, to track script loading, and to listen for console logging we have to add listeners on the page before the page load begins.   If Firebug is not active at the time of page load, none of this happens. So after you open Firebug you have to reload to get all the info. That was true in 1.3 and it still true in 1.4. The only change here is that 1.4 you have to do it manually.

By now my brain automatically hits reload when I open Firebug, since I always want all the info on all the panels


Please post follows to the newsgroup.

Net Panel Documentation

Saturday, May 9th, 2009

Jan ‘Honza’ Odvarko has a great new page describing the features of the Firebug Net panel


Firebug Docs: Using Chromebug on Firebug

Wednesday, December 17th, 2008

I wrote a short tutorial on one way I use Chromebug when developing Firebug.

The job was to find the code for  the source link in the Style side panel for the HTML panel. By using inspect, I find the HTML div for the Style panel entry, then search the source for the CSS class name on the div. That gets me close a lot of the time.