Firebug, like the Web Developer toolbar, is another very useful extension, especially when developing JavaScript. But Firebug can be used for many other things, such as exploring the HTML or CSS of our site.

Like the previous extension, we can download this Firefox extension from the Firefox add-ons site at https://addons.mozilla.org.

Once installed, Firebug needs to be enabled from the add-ons screen:

Once enabled, a new button will appear at the bottom right-hand side of the Firefox browser. You will notice a tiny icon that looks like the previous icon, but smaller, as follows:

Once we click on this button, a new panel will appear with some tabs that we can see in the following screenshot:

How we can use two of these tabs, Console and HTML, is something that we are just about to find out.

Using Firebug to log messages

When working with JavaScript, especially AJAX, it's quite useful to know what is happening. For example, in our mod_littlecontact module, we have a click event that is called when the button is clicked, as follows:

$('#send_button').click(function(e) {
        

This function in turn makes some checks and then makes the following call:

$.post("index.php", $("#sc_form").serialize(), show_ok());
        

This results in the show_ok() function being called. The problem is that when we click on the button, we have no control over which function is being executed at the time. So if something goes wrong it will be quite hard to know where the error is.

With Firebug, we have a method called console.log, which we can use to place some messages at some points. In our button click event, we will place something as follows:

$('#send_button').click(function(e) { console.log('The button has been clicked'),
        

As you can see, we have placed the console.log method with one message, which informs us that the button has been clicked.

Also, in our show_ok function, we are going to place a similar message, like the next one:

function show_ok(){
            console.log('We are in the show_ok function'),
        

But how do we see these messages? Well, when our page is loaded and the Firebug screen is open, you can click on the Console tab and will see something such as this:

We can see our messages, and this way we know our code has gone through these two functions, but we can also see the AJAX call that was made to the index.php file:

$.post("index.php", $("#sc_form").serialize(), show_ok());
        

With this small help, it's a bit easier to work with JavaScript and AJAX queries. But what about the HTML tab? Let's continue to take a look at that other interesting option.

Using Firebug to check HTML source code

This may seem less useful than the previous option, but soon you will see how we can use it to our own benefit.

Think about our jCarousel example; for it to work we placed the following code:

<div id="tinyphotos">
            <ul id="carousel" class="jcarousel-skin-tango">
            <?php
            $i=0;
            foreach($news as $new){
            ?>
            <li><img src="<?php JURI::base(); ?>administrator/components/ com_tinynews/images/<?php echo $new->image; ?>" alt="<?php echo $new->caption; ?>" height="70"/></li>
            <?php
            $i++;
            }
            ?>
            </ul>
            </div>
        

Later, when our site is loaded, if we check the source code we can see the following:

<div id="tinyphotos">
            <ul id="carousel" class="jcarousel-skin-tango">
            <li><img src="/administrator/components/ com_tinynews/images/image_1.jpg" alt="Another image caption" height="70"/></li>
            …
            <li><img src="/administrator/components/ com_tinynews/images/image_1.jpg" alt="Image with text" height="70"/></li>
            </ul>
            </div>
        

However, after the jCarousel plugin is called, this code will be modified. But, if we take a look at the Firebug screen's HTML tab, we will see a screen where we can navigate through the code. In fact, if we start expanding the code (clicking on the plus symbols near to the code), we will find a code that looks similar to the next image:

This code is the result of our page, modified by the jCarousel plugin, with new elements and classes. It can be very useful to be able to see these modifications. But even better, if we move our mouse by the code, the elements will be highlighted, so we know in each instance which code we are looking at.

Of course, all these things are only a very little piece of what can be achieved with Firebug. If you want to learn more, you can take a look at the following link:

http://net.tutsplus.com/tutorials/other/10-reasons-why-you-should-be-using-firebug/.

There you will be able to see other uses of Firebug so that you can make the most of it.