10 Reasons Why You Should Be Using Firebug

Thursday, 18 June 2009 16:05

Firebug is one of the most popular tools used by web developers. In this article, we’ll take a closer look at ten of its most attractive features.

1. Console

The first thing you’re going to notice when opening Firebug (either from the
status bar or using the ctrl+F12 key combination) will be the Console panel. After a quick look, one might think that it is an alternate version of the Error Console
(Ctrl+Shift+J). Common features between the two are:

logging of errors, warnings and notices
ability to run Javascript code

But Firebug extends the Firefox functionality, so it can do
much more, such as:

logging errors for Javascript, CSS, XML, XMLHttpRequest (AJAX) and
Chrome (Firefox internals)
run Javascript code upon the current webpage
additional Javascript object is put at disposal (console)

Let’s look over some examples built upon the console object. Imagine running the
following HTML file.

<html>
    <head>
        <script type="text/javascript">
            console.time(1);
            console.log('the script section has started executing');
            console.warn('warning message');
            console.error('error message');
            console.info('info message');
            console.log(
                'finishing script execution\n',
                'execution took:'
            );
            console.timeEnd(1);
        </script>
    </head>
</html>

This will generate the following result.

2. HTML

The second panel, and the one in which I’m sure you’re going to spend a lot
of time, is split among several sections which we will review below.

This button is equivalent to the “Inspect Element” in a webpage
context menu. Apart from being helpful with quickly picking elements in page,
it also outlines the currently selected element.
In this section, we have the hierarchy of the currently
selected element and the ability to perform a series of actions (on every
individual component of the hierarchy), like:
- copying inner HTML
- creating XPath expressions
- attaching event observer (and logging in the Console panel)
- deleting element
- editing element and child nodes
- moving the element in the DOM tab for inspection
The main window of the panel; useful for traversing through the
HTML document, quick modification of code and spotting broken code (like
closing a div too early). The contextual menu offers the same set of functionality
like section nr. 2
In this section the computed style of the current page or element are
displayed. The ability to actively modify styles and inspect CSS
inheritance are its most valuable features.
Through this section one can easily examine the box model of
an element: content size, padding, offsets, margins and borders.

The DOM section upon access generates a list with all, of the currently
selected elements, methods and properties.

3. CSS

The main difference between this panel and the Style section under HTML is
that here you can work on uncomputed styles. I’ll outline and number the sections
(and features this time).

If the page on which we are working contains multiple stylesheets, then we will be able to select the desired stylesheet.
The main region where the CSS code is displayed.
Easily modify CSS properties.
Easily dissable CSS rules.

4. Script

Sometimes, when writing Javascript code, you have to get your hands
dirty. Most of the time, you’ll find yourself working with the
Console panel; only in extreme conditions will that make you jump to the Script
panel. Given those extreme conditions (which are bound to happen), let’s review this panel, and start familiarizing ourselves with it.

Dropdown button from which we can select the desired script file.
Debugging functions: continue, step in, step over
and step out. They only kick in when code execution reaches a
breakpoint.
Main window. Here we set (and remove) breakpoints, as well as inspect
Javascript code.
Similar to the DOM panel, the Watch section prints out object methods
and parameters for currently debugging code.
Shows the stackment of functions in real time.
List of currently active breakpoints. Only breakpoint removal can be done
from here.

5. DOM

The same as HTML->DOM. Given the fact that nothing differs from what was mentioned before, we’ll skip to the next section.

6. Net

Curious how long your page took to load? Or do you
want to know which request takes the most time to complete? Thankfully, this, too, can be accomplished via the Net panel.

Requests can be filtered according to their type.
Every request is shown in this section. At the end of the requests list
we see a summary of them: number of requests, size, how much was cached
already and total time they took to complete.
More details can be revealed, as: HTTP headers, response and cache (same
as response)

Performance Testing

Need to test the performance of a specific function or loop? Use the Firebug’s “timer” feature.

function TimeTracker(){
 console.time("MyTimer");
 for(x=5000; x > 0; x--){}
 console.timeEnd("MyTimer");
}

Three step. We begin by calling “console.time” and pass in a unique key. Next, we insert our code. Finally, we call console.timeEnd, and once again, pass in our unique key.

7. Reference

This is an additional panel provided by CodeBurner, a Firebug
add-on. As its name states, through this panel you’ll have quick access to your HTML
and CSS code. Even if the panel is self-explanatory, we will still look over
it.

The searching and filtering section.
Here the results stack up, in our case there is only one result.
Compatibility panel for the latest major browser versions. Yes, Chrome is
not in this list, but Chrome uses the same engine as Safari, namely Webkit, so if
it’s Safari compatible it will work in Chrome as well.
And if the information displayed in this panel isn’t enough, you can find more info by accessing this link, like: examples, compatibility in more browser
versions, description, etc.

8. PixelPerfect

If you’ve ever done PSD slicing, you know how time consuming the measurement
of spacing in between composition elements can be. That’s where PixelPerfect proves it’s
power. Having this add-on in your toolbox will help you perform the perfect slice.

With this button we can add multiple overlay images for the current page.
Overlays list, from here we apply or delete the overlay.
Overlay settings section.

9. YSlow

Another Firebug add-on developed by Yahoo!, which can suggest speed improvements
based on a series of tests performed.

Through YSlow, we can grade our website’s overall performance. We can easily
spot issues which can be improved, and a series of recommendations are available
as well.

Apart from the pie charted statistics, we also have JSLint and Smush.it at our disposal.

10. FirePHP

Our last, but not least, important Firebug component is FirePHP. With this
add-on, we can transparently send information (warnings, errors, logging, info)
to the Console panel from our PHP code. Example usage from FirePHP’s website:

<?php

    FB::log('Log message');
    FB::info('Info message');
    FB::warn('Warn message');
    FB::error('Error message');

?>

Closing

I hope this small list of Firebug panels/add-on will make your life as a
web person easier — as it did to me. In the end, we all know that
bugs are bound to happen, so there’s no excuse for not being prepared.

Follow these links to download the add-ons: