Archive for the 'Firebug Tips' Category

HTML links are like span tags

Monday, November 30th, 2009

Ok maybe you are up on your HTML more than I am, but I was surprised that an <a> tag around an image does not have a CSS box around the image.  This came up in  issue 2534.  The reporter had an example like the one below, with an <a> tag around an image:


If you inspect the image in Firebug, then mouse over the <a> tag, you can see that the <a> tag’s box is smaller than the image. But Firebug’s inspect is correct: the CSS box for an <a> tag is similar to a <span> tag. They are both “inline” elements, so the image is not contained in their box.

For a more dramatic example, see the test case for issue 2534. Thanks to Boris for helping us sort this out.


Please post followups to the newsgroup.

Firebug fails silently in private browsing mode

Friday, August 7th, 2009

mchung, one of our hard-working Firebug users, just uncovered a problem that I think hit many users:

If you enter Firefox’s Private Browsing Mode, then Firebug 1.4 will not stay open on reload or tab switching.

(See Issue 2011: Firebug console does not stay open when navigating between tabs).

Unfortunately when people report these symptoms, I have been telling them they have to create a new Firefox profile to fix it. And it does fix it, for a while. Until they once again set private browsing mode.

The only immediate fix here will be a warning that part of Firebug fails if you are in private browsing mode. The workaround is simple: don’t use Firebug in Private Browsing Mode.


Followups in the newsgroup please.

remove, remove, removeEventListener!

Monday, March 23rd, 2009

Ever couple of months I spend an embarrassingly long time tripping on the same stupid mistake:

win.addEventListener("pageshow", onPageShow,  true);
.. 2215 lines all twisted together...
win.removeEventListener("pageshow", onPageShow,  false);

The removeEventListener() call fails, silently, so the event handler can be called again. This symptom of the mistake can happen a long time from the error. The lines are so similar that it’s an easy mistake to make.  The dodgy documentation on Firefox events and trying to get Firebug working on FF3.1b3 provide lots of other explanations for the extra events one sees.

I really don’t get why the removeEventListener() does not give an error;  checking this would be a nice thing for a debugger to do (someday ;-).

In the mean time I’m going to try a different approach: setting the capturing value on the event handler object:

win.addEventListener("pageshow", onPageShow,  onPageShow.capturing);
.. 2215 lines all twisted together...
win.removeEventListener("pageshow", onPageShow,  onPageShow.capturing);

That way they get changed in sync. Maybe you have another way?


Firebug Tip: Its a Button!

Thursday, December 4th, 2008

In its effort to be compact, Firebug has some user interface features that, ah, require some experience. One is the Firebug Menu: yup the Firebug icon in the upper left corner of the user interface is actually a menu.

Someday I hope we can change its styling to outline it so it looks like a button….

Now if you open Firebug in its own window, the button does not exist, and the menu is under “View”.

And if you open Firebug in its own window on the Mac, neither the button nor the View menu exists. I’m guessing the View menu is off whereever Mac puts them, but I can’t see a Mac from here…

Firebug tip: make your console output hierarchical

Wednesday, December 3rd, 2008

Here’s how you can group output in Firebug’s console:

function groupit()
{"group this");
        console.log("level 1 log")"group level 2");
            console.warn("level 2 warn")
  "level 2 info")
        console.log("level 1 log");
    console.log("ungrouped log");

The result is

This example is from Joe Hewitt’s original tests