Firebug (http://getfirebug.com/) is a Firefox add-on that extends the browser with some very helpful web development tools. I think the tag line on their website says it best “You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page”. The key phrase here is “live in any web page”. Firebug can be activated for any site on the internet and allows you to interact in a number of ways. Throughout this road map, I will explain some of the common scenarios that I use on a daily basis.

Installing Firebug

The first step is to install the Firebug extension. If you are running Firefox 3.0, use this link:

https://addons.mozilla.org/en-US/firefox/addons/versions/1843#version-1.3.3

Click the green Add to Firefox button, then the Install Now button. After installation, restart Firefox and in the bottom right corner, you'll notice a little bug icon. This is how you can invoke Firebug on any web page.

Using Firebug for the first time

Navigate to http://www.webassist.com/ then click the little bug icon to show the Firebug interface. I like to have the Console, Script, and Net tabs enabled for all sites that I visit. You can also enable each of these tabs on a per site basis if you wish. For now, let's just globally enable those tabs.

Select the Console tab, and click the down arrow on the right side. Then, select Enabled.

Repeat these steps for the Script and Net tabs as well. After all 3 are enabled, reload http://www.webassist.com/.

Editing HTML and CSS in Real Time

One of the most common uses I have for Firebug is real time editing of HTML and CSS. You can accomplish this is many ways. I use the Inspect button (located above the Console tab) to select the exact element I want to manipulate.

To give this a try, click the Inspect button, then click the WebAssist logo on the page. You'll notice the HTML code for the image is highlighted in the Firebug HTML tab and the CSS applied to the image shows up in a pane to the right.

Now, let's adjust some of the code and watch it change in real time in the web page.

In the CSS pane, double click on the #header #logo line, this will allow you to add a new css property. Type border: solid 5px navy. Notice as soon as you finish typing, the logo now has a navy border around it.

You can use this same technique to edit existing properties as well. Adjust the padding-left property by double clicking on 25px, and change it to 200px.

In addition to editing the CSS, we also have full access to the HTML code. On the left side of Firebug, the HTML is still selected for our logo. As an example, we can quickly change the width and height of the image.

Double click on the “306” and change the width to 200 and change the height from “84” to “55”. Notice the change is reflected in real time on your web page.

I use these techniques quite a bit when I am designing a web page to quickly try out new styles without having to edit my source code directly all the time. You can get an idea for how something will render in a real browser environment.

Monitoring AJAX Calls

AJAX is quite common nowadays, you might even have it implemented on your own site. Firebug allows us to monitor these AJAX communications as they happen so we can debug errors or just verify what is happening behind the scenes. The best way to show this is with an example.

Navigate to http://demos.mootools.net/Request.JSON, this is a mootools demo that uses AJAX to populate a div on the page.

Open firebug and select the Net tab. By default it will look similar to this:

We see there are several GET requests for some external CSS files. The Net tab will allow us to monitor all files that are being served for the web page, the file size, and how long they took to download.

Next we will monitor what it looks like when an AJAX call is made.

Click the Load JSON Data link and after a few seconds, you'll see the web page populate some new images. Notice the Net tab has many more things listed. The item we want to focus on is called POST data.json. This was the AJAX call to retrieve the data.

Click the arrow to expand the row, and click the Response tab to see the raw JSON data that was retrieved from the AJAX call.

I use this technique quite often to debug an AJAX call that might not be behaving the way I thought. It is a very handy way to pick up server side errors that might be affecting your output.

Other Cool Things to Try Out

There are tons of other things that Firebug can be used for. Here are some more things you can explore on your own.

Error Reporting

For more information: http://getfirebug.com/errors.html

Firebug will display any errors that occur on your page and allow you to easily trace where they are coming from. If there are JavaScript errors, there will be a message in the bottom right indicating how many errors were found.

Execute JavaScript on the Fly

For more information: http://getfirebug.com/cl.html

Using the Console tab, you can type in JavaScript code and Firebug will evaluate it right on the spot. You can check the value of a variable, compute a mathematical expression, and more. The console will even auto complete as you are typing!

Error Logging

For more information: http://getfirebug.com/logging.html

Rather than using alert() statements to debug your JavaScript, try using console.log(). This will put any debug messages right in Firebug's console for you to keep track of.

Testing Your Pages in Other Browsers

Having a built-in Firefox extension is great, but us web developers know a big part of the job is making sure a site works on a multitude of browsers. At WebAssist, we design all of our pages to be compatible with Firefox, Safari, and Internet Explorer 7, and Internet Explorer 8. Wouldn't it be great to have the capabilities of Firebug in these other browsers?

We're in luck! They have what’s called Firebug Lite (http://getfirebug.com/lite.html) available for just this purpose. Essentially it is some JavaScript code that gives us some of the features from the Firefox add-on. Check out their web page for the details on how to integrate that on your site to help with testing.

In Conclusion

Firebug is a great tool that helps me be efficient in my web page testing and helps to track down issues that would have normally been much more difficult. The tips above will get you started with using Firebug, but also be sure to check out their website (http://getfirebug.com) for even more info and ideas on what you can accomplish.

About WebAssist

WebAssist helps you build better websites faster by offering software, solutions, and training needed to succeed on the web. WebAssist.com hosts a thriving community of over 300,000 designers, developers, and business owners. WebAssist's partners include Adobe, Microsoft, and PayPal.

Join our Community

From free software and training, to special offers, there is something for everyone. Come take a look at what is waiting for you and sign up today to gain access to all of the valuable benefits awarded to the members of our community. Click here to join our community.