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)

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.

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.

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:

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: