Firebug Debug Tool
After you install Firebug you will see a gray ‘Firebug’ in the Firefox Navigation toolbar (along the top of the window). Click on the Bug to start. Firebug will open in the bottom of your web page.
HTML. CSS, and DOM
As soon as you open Firebug you can examine the Web page markup, styling, and object model. Three tabs HTML, CSS, and DOM are activated 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 system intensive features off.
Once you have enabled one of the active-listener panels, Firebug will cause some overhead. Look at Firefox’s toolbar: 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.
To bring down the Firebug UI you can either push the Firebug toolbar 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 as a 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, click ‘Open Firebug in New Window’ (next to the search box), or use Control+F12 (or Command+F12 on Mac) for fast keyboard access.
Whenever the Firebug toolbar 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.
Function Key F12 for Turning On
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.
Leave Active-Listener Disabled
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.
Firefox for Site Engineers
If your primary job is monitoring load times and looking out for 404s, activate the Net panel and perhaps the Console.