Brenelz Web Design Solutions

Firebug is one of those must haves if you are a web developer or designer.  It along with the many Firefox extensions is what made me switch from Internet Explorer.  The plugin I will talk about today is Firebug.  You can download it from getfirebug.com and you will immediately fall in love.

Firebug out of the box contains many useful features.  It has tabs called Console, HTML, CSS, Script, DOM, and Net.  Below I go further into depth of each of these tabs.

Console

The console is a place where you can directly run JavaScript on an existing page.  Try typing some JavaScript in the text area and clicking run.  Try the following

var anchors = document.getElementsByTagName("a");
var anchorHrefs = [];
for(var i=0;i<anchors .length;i++)
{
    anchorHrefs.push(anchors[i].href+"\n");
}
alert(anchorHrefs);

When this is run you will get an alert of all the anchors href attribute in the current page.  Your imagination is really the limit as any JavaScript can be put into this box.

As well as run time JavaScript the console shows XMLHttpRequest’s ore in other words AJAX requests.  It tells you the file that was requested, with what method (GET or POST) as well as what was sent and what was received.  This functionality is also shown in the Net tab but is sometimes easy to debug AJAX using the console.

HTML

You can probably guess what this tab does.  It displays the pages HTML with nice formatting and allows collapsing of blocks and lets you quickly delete elements, and change attributes on the fly.

Another great feature is that when you click “Inspect” and then mouse over an element; Firebug jumps you to that exact point in the HTML.  From there you can change that element attributes,  or even its style in the right hand panel.  A style is disabled as easily as clicking to the left of a property, and enabled by clicking it once again.

CSS properties are also crossed out if they are overwritten by another rule.  This helps you determine specificity problems, as well as seeing why certain styles are not applying the way you had hoped.

CSS

This tab shows only your CSS and features the same features as the CSS panel in the HTML tab.  Properties can be toggled on and off as well as properties added/deleted in real time.

Remember that when these changes are made, the files aren’t actually changed.  As soon as you refresh the page they will be gone.  This is the reason why you use Firebug if you want to see what looks good, as it is much faster than changing a CSS property, saving, viewing, and then doing the same thing again for using a different value.

Script

The Script tab contains your JavaScript code.  It allows you to use the basic debugging techniques in your browser.  It features breakpoints, variable values, and code walk-through.

Setting breakpoints is as easy as clicking a line number and a red circle will appear.  Breakpoints are best used entering functions, and objects.  Once a breakpoint is set you should refresh the page and do the task to trigger that JavaScript event.  Once triggered you use the controls in the top right corner.  You can choose to play JavaScript until next breakpoint, Step Into code block, Step Over code block, or Step Out of the current code block.

DOM

Have you ever wanted a GUI for navigating the DOM?  Well Firebug gives it to you.  Here it shows your DOM elements such as your anchor tags, form element values, etc..  It is really helpful when you have to write that JavaScript and your not sure how to get at the child node that you want.

Here it also shows your JavaScript variables and what their current value is.  If you don’t have Firebug you will need to keep track of all these in your head or doing a pile of alerts to see a variables value.

Net

Finally we have come to the Net tab.  The Net tab breaks down all the HTTP requests into what was requested, the HTTP status code, the size, and even how long that one resource took to load.  I don’t know about you but this is valuable information.  Want to make sure every loaded OK?  Check the Net tab and see that the status codes are proper.  If you’re wondering what is taking the most time to load on your site, you can check this and see.  You might occasionally find your non-optimized images taking a long time to load.  This helps you spot these errors.

That about covers the basic functionality that Firebug gives to us web developers.  I will inform you that this is really only the tip of the iceberg.  Down the road I will probably give you an insight to the many plugins that Firebug has yet.  These are not Firefox extensions, but specific to Firebug that add more functionality.  Below I list a few that you can read upon further if you so desire.

• YSlow
• FirePHP
• FireSpider
• FireCookie
• SenSEO
• Rainbow for Firebug
• Pixel Perfect