International Marketing Services

Firebug Debug Tool

Firebug Debug Tool

I found a nice free tool called Firebug which integrates with Firefox for web development. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

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.

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.

JavaScript

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.

Active Listener

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.

Firebug UI

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.

Turning Off

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.

For JavaScript Leave Panels Enabled

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

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.

Summary

Leave a Reply

Your email address will not be published. Required fields are marked *

Magnetic Sponsoring

The Online Self Improvement and Self Help Encyclopedia

We support:

See you there!