Firebug 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 article, 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 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.
TIP: These changes will be lost once you reload the page, so make sure you edit your actual source code with any changes you want to keep.
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://getfirebug.com/lite.html, 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 like 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.
TIP: The Net tab can be filtered to only show certain type of requests. For our example, we could have selected XHR which would have shown only XMLHTTPRequest calls (which is AJAX).
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 for even more info and ideas on what you can accomplish.
Great post, Firebug is incredibly useful and worth a download for anyone who is interested in seeing the behind the scenes of how websites are coded together, and even more useful for developers interested in making/seeing instant modifications to live websites.