Firebug – The lesser known features

By: Paul  on 05 Sep 2010

An introduction to some of the lesser known features of Firebug

What is firebug? Some say it is the web developer’s swiss army knife. Others say that it is the greatest thing since the invention of the computer. What is is exactly is a small window that is added on to Firefox that shows the source code of web pages, JavaScript contents, server requests, and some other stuff. It is an indispensable tool for the serious web developer. In this series we are going to touch on the major (and some not so famous) features of this Firefox addon and show how it can make life for a developer so much easier. Read on!

Basic Terminology

In order to understand how firebug works and how it can aid you it is essential to tackle a few terms first. HTTP Request The HTTP request sent to the server to retrieve an HTML page, image or CSS file. Requests are grouped within pages. HTTP Response. HTTP response The HTTP response is the answer of the Web server to an HTTP request. server response codes reference

Moving on..

Whenever an HTTP request is made, whether it is for a web page, image, or Ajax call, response information and headers are sent. You can actually see these codes and what is being sent if you inspect it with firebug using the console tab. This tab shows you all of the communication between the server and your page. When viewing the request, the first part is the destination address that the code is being sent to, the following part is a status code explaining what happened, and the final part tells how long it took. A pretty complete story. This allows you to see if your request if successful or if it has failed.For example: If the response (circled in green) was a 404 HTTP code then the page that the info was being sent to was not found, in which case you would need to check your path the info is being sent to. Another useful feature of the console tab is the ability to throw out values of stuff you are trying to debug. Instead of using an alert every time you want to check a value you can just use the console. To dump (get the value of) certain elements in the console you can use the nifty function console.log( ); To illustrate consider the following code:

var name = Paul;
console.log(num);

This will output the name Paul in the console. Pretty cool. You can instantly find values to variables and other things using the console. Another useful function for console beginners is console.count( ); . It enables you to see how many times a function was called in your script. If it was successful then you can use the Post tab ( circled in red ) to see what was sent. The last thing we will cover today is the command line. The command line allows you to type JavaScript in and it is executed as if it were part of the page. To illustrate type in the following jQuery and watch the magic: $(‘p’).css(‘color’,'green’); As you can see, the p tags were changed from white to green and we didn’t even have to click on something or wait for an event to happen. The action happened immediately and even showed the number of elements that were affected. Very cool tool over all. In the next part of this series on firebug we are going to check out some of the other tabs and their features. If you have more input to add or extra stuff to throw in feel free to jump in in the comments! Feel free to check out the creator’s website. FireBug – JoeHewitt.com.