Enabling Firebug

Firebug tries to stay out of your way until you need it; it goes away if you switch to another Firefox tab. Firebug can be optimized for HTML authors, CSS designers,Javascript developers, and Site Engineers.

One Click to Start Firebug

After you install Firebug you will see a gray 'Firebug' in the Firefox status bar (along the bottom of the window). Click on the Bug to start. Firebug will open in the bottom of your web page.

Instant HTML, CSS, and DOM Views

As soon as you open Firebug you can examine the Web page markup, styling, and object model. Three tabs -- HTML, CSS, and DOM -- activate as soon as you open Firebug. If you are a HTML author or CSS designer, this may be all of the Firebug you need. As long as you don't enable other panels, the overhead caused by using the Firebug should be small: by default Firebug keeps all the expensive features off.

Enabling Panels

To work on Javascript code or to study the network action on a site, you need to enable one or more Firebug panels. If you select the Console, Script, or Net panels, you will see the tab is grey and the panel says "disabled". Each panel tab has a small menu control for enabling the panel. All the panels can be enabled or disabled using the context menu (right click) on the Firebug status bar icon.

Coming up for Air (or email...)

Once you have enabled one of the active-listener panels, Firebug will cause some overhead. Look at Firefox's status bar: you will see that the Firebug icon is now orange, meaning 'on'. As you change tabs, Firebug will suspend if you have not opened Firebug on that page.

Minimize it; close it

To bring down the Firebug UI you can either push the Firebug status bar icon a second time or use the minimize button next to the search box (down arrow). To close Firebug on a page, use the red [x].

Use that second monitor

Free Firebug from the tiny confines of the browser and give it a whole window to play with. If you have two monitors, you'll work even faster with Firebug in one window and Firefox in the other.

To open Firebug in a separate window, customize the Firefox toolbars and add the Firebug button. You can click this button, or use Control+F12 (or Command+F12 on Mac) for fast keyboard access.

Why is Firebug Still On???

Whenever the Firebug status bar icon is orange (not gray), Firebug has one or more active listeners. If you get confused about why Firebug is still on, hover over the icon. Firebug may be minimized on a tab you currently do not have selected.

F12 is your friend

The F12 key is undoubtedly the fastest way to get to Firebug. Train yourself to hit that key when it's time to go debugging. If you're the big screen type, use Control+F12 (or Command+F12 on Mac) to open Firebug in a separate window.

Firebug For HTML Authors and CSS Designers

If your primary work in Firebug is with HTML or CSS, leave all the active-listener panels Disabled. Firebug will have minimal overhead when you are not using it. You probably want enable the Console to look for errors. Enable one site at a time or enable the Console (only) for all sites, then selectively disable it for sites like your email

Firebug for Javascript Developers

For Javascript you'll want the Console and Script panels enabled. You may as well run with these panels fully enabled.

Firebug for Site Engineers

If your primary job is monitoring load times and looking out for 404s, activate the Net panel and perhaps the Console.