Firebug – A developer’s best friend

I think a good place to start is to describe one of my favorite tools.  It’s called Firebug, it’s an add-on for Mozilla browsers.

At work, if one of my co-workers comes to me in the J-Block and asks a Javascript or CSS question, before I even consider helping them I ask if they reviewed the styles or the Javascript in Firebug.  9 times out 10 if it’s a really easy answer, you’ll see it almost immediately with the help of Firebug.

Understanding Firebug

Let me explain a little bit about Firebug.  Firebug has 6 tabs that allow you to see different things.  The first tab is “Console”.  This tab will list all AJAX calls that occur.  It will display the URL that was called in the AJAX request, if you click on the link it will expand and allow you to see more detail.  I use this to help me track down any unexpected responses from my AJAX.  You can view all variables that were sent through POST or GET, you can view what was returned from the AJAX call, and more, but those are the most useful parts.  Definitely worth exploring if you are building a site using AJAX.  The console is also a spot where your debug messages get written to.  In your Javascript files if you do a “consle.log(‘Some text’);” this message will be displayed in the console.

The next tab is called “HTML”.  This tab does as it says and displays the entire HTML for that page allowing you to expand/contract specific areas that you are looking at.  As you move your mouse over some HTML code, Firebug highlights in your browser where this object lives on your page.  I’m guessing you can already imagine the possibilities with this.  I use this tab heavily to track down any layout issues.  You may also notice that this tab is actually split into two parts.  On the right hand side, all of your CSS is listed.  This dynamically updates as you select different objects.  Not only does it show you your CSS, it allows you to add, edit, and delete styles dynamically to test out how to fix that little layout problem that has given you that headache.

The CSS and Script tabs function similarly as the HTML tab, but it limits the display to your CSS and Javascript, respectively.  If you have multiple files, right above the tab displays the current filename and is a drop-down allowing you to change the working file.

Next up is the DOM tab.  To be frank, I’ve never used this tab.  Feel free to comment below if you’ve found anything useful here.

The last tab is called “Net”.  This tab is extremely useful if you are tasked with optimizing the front-end speed of your web application.  As you can see it shows you how long the server took to respond with the page, how long each CSS, Javascript, and image file took to load.  The more requests you have, the slower your page load will be.

Yahoo has created an excellent add-on for Firebug called YSlow for Firebug.  In my next blog, I’ll discuss how to use and understand YSlow features and achieve amazing performance gains on your web sites.

Thanks for reading and remember, make sure you’ve ended your if!