Every programmer will make mistakes. Even the most professional and well-versed programmer will write buggy code in the system. Hence, writing code and debugging are said to be a routine task to a programmer.

If you have been involved in Web Development for some time, I believe you have heard about Firebug. In a nutshell, Firebug is an extension of Mozilla Firefox web browser to allow developers to monitor, edit and debug JavaScript, CSS, HTML in their web applications. There are also some add-ons of Firefox to integrate with Firebug, such as YSlow and Hammerhead etc. So, what I used to do with Firebug? Well, I am going to list out some of the features I personally like the most in Firebug.

Before getting started, here is the info of Firefox and Firebug on my machine:

Firebug: Version 1.5.0
Firefox's user-agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6

1) Debugging JavaScript
If there was an error occurred in JavaScript, I will always use Firebug to check with my code. To check JS code, we have to make sure ‘Show JavaScript Errors’ has been checked in ‘Console’ tab. However, it should be checked by default once we got Firebug installed. Let’s consider the simple JS code as follows, which will generate an error after it’s run:

 function displayHello(){
   var message = "Hello! Nice to meet you.";
   alert(message);
 
 displayHello();

Apparently, there was missing a closing braces of the ‘displayHello’ function and causing an error. If I’m running the code snippet by turning on Firebug, I should be able to see the following message under ‘Console’ tab, as shown in this screen-shot:

JS error

2) Dealing with Ajax
Ajax has been widely used and quite common in Web 2.0. Sometimes, we will have to check both front-end and back-end and making sure there is no error in our code. Here is an example of Ajax works together with PHP. Say, I’m making Ajax call which is working perfectly, however, I encountered a problem and failed to retrieve result via the Ajax call. I can do a quick check on the result that sent back to the front-end in such situation, through Firebug debugger. For instance, I have made a jQuery’s get Ajax call and the function is working fine without any error, as follows:

Ajax call (with no error)

 function displayHelloAjax(){
   $.get("hello.php", {action: "display"}, 
    function( result ) {
     if( result ){
      alert(result);
	}
 });
}
 
$(function(){
  displayHelloAjax();
});

Unfortunately, I have gotten an error when ‘hello.php’ is called via Ajax and causing me unable to get the expected result in alert prompt. So, what should I do? Definitely, I will have to check on the back-end code. For example, below is the simple PHP code I’m running on, but with error:

PHP (with error)

<?php
$action = $_GET["action"];
if( isset($action) && $action == "display" ){
 echo "Hello! Nice to meet you."
}
?>

Once I executed the code with Firebug is turned on, I will see the error message under the ‘Console’ tab:

PHP error

Note: In this case, however, you still be able to see the same error message in alert prompt. This example emphasizes debugging via Firebug.

3) HTML Layout
If text editor or IDE we use does not support design view, we may take the advantage of Firebug to trace the specific HTML elements from our web page, too.

HTML Layout

4) Web Performance
If you are fussy with your works, and particular with the speed and network of your web page, we can use Firebug to check with the speed of page loading. Firebug has come out with ‘Net’ option to enable us to see the total of time (in milliseconds) to load a file when it is invoked. So, most of time, I will use this option to check the speed of my site and evaluate the time is taken for loading a file such as image, JS file etc. And so, appropriate adjustment might be taken if it is taking too much time to load that particular file. Here is an example of the screen-shot:

Once this option is turned on, I will be able to see all files that is being loaded and total of time that was taken for downloading it. If I only want to check on, say JavaScript files, I can selectively choose ‘JS’ and then I’m able to get the result for JS files only. Likewise, if I wanted to check the response from the server, I can just simply expand the URL and view it under ‘Response’ tab, as well.

So, what else?
The features I have mentioned above are just some good parts of Firebug that I frequently use in my projects. You are allowed to do more things by using Firebug, such as setting breakpoint, editing HTML/CSS straight from Firebug, inspecting DOM elements and so on. There are lots of debugger can be found online, Firebug is only one of the best and highly recommended. Which debugger tool should be used really depends on individual preference. If you want to know more, just check out on Firebug’s official site.

Related posts:

1. Facebox(Facebook-Style): Load Your Page into Lightbox on the Fly!
2. Create Fancy Loading Effect with jQuery
3. JavaScript: Dynamically Styling Form Elements in IE6
4. Close Window without the Prompt Message in IE 7, How?
5. jQuery: Implement Ajax with $.ajax()