Firebug: A Beginner's Guide to Website Debugging

If you are a newcomer to the world of web development, one of the scariest things to understand is the code that makes everything come together on a site. From basic HTML markup to CSS, many different elements and languages are working in tandem to achieve a certain goal. Sometimes getting things on your site to look and act the way you want can be tricky, but luckily there are tools out there that can help you fine tune your site experience and quickly fix errors without spending hours (or even days) creating and checking code. One of the most exciting new tools for this type of testing is Firebug, an extension for the popular web browser Firefox. In this tutorial, you will learn the basics of Firebug, from installation to editing your style sheets on the fly. This tutorial is intended for beginners who have a basic knowledge of HTML and CSS.

Step 1: Installation & Setup

Download & Install Firefox

To be able to use Firebug, you must be using the Firefox browser. If you already have Firefox, feel free to skip to the next step, "Installing Firebug". Otherwise, proceed to the Firefox 3 download page. Click on the green download badge to download the installer. After the download has completed, run the installer program and follow the step-by-step instructions to properly install the browser.

Now that you've successfully installed Firefox, we're ready to move on to installing the Firebug add-on.

Installing Firebug

Firebug is an extension, or "add-on", to Firefox. To install this, we will need to grab the most recent version of Firebug, which can be downloaded from the Firebug download page. Click the "Add to Firefox" button in the middle of the page to begin installation. A warning message will pop up asking if you are sure you want to install the add-on. Click the "Install Now" button as soon as it becomes available. The extension should quickly install and ask you to restart the browser.

After restarting Firefox, you should notice a new icon in the status bar at the bottom right corner of your browser window. It is a small gray bug, like the one in the illustration to the left and lets you know that Firebug is installed and ready to go. This will be your toggle switch for Firebug, which we will talk about in the next section.

Step 2: Getting Started

Now that we're all set up, lets jump into getting familiar with using the Firebug interface. Before getting started, make sure you're on a web page with rich content: images, stylized text, complex layouts, etc. This will allow you to test the full range of Firebug's capabilities.

Viewing Your Code: Inspecting HTML & CSS

We're going to start with the most basic feature of Firebug: viewing specific parts of code. When dealing with a large, complicated body of code on a page, nothing is worse than having to scroll through lines and lines of tags to try and find that one page element you want to edit. It doesn't have to be this way. Firebug makes it fast and easy to zero in on specific site elements while displaying an organized list of corresponding styles affecting your selection.

To begin, click on the gray bug icon in the bottom-right corner of the browser window. This will produce a fixed window at the bottom of your browser that is split into two panes: the left side displaying the HTML on the page, and the right side displaying the CSS relevant to the HTML selected on the left. Try clicking on different elements of your HTML in the left panel. As you select different tags, notice that the styles on the right change according to your selection. This view allows you to see the exact styles that are affecting your markup, how they are cascading, and which ones are being canceled out by styles with higher specificity. As you select different elements in the left pane, you'll also notice that these elements are highlighted on the actual page itself, providing a "live" highlighting of your code selection on the site.

An alternate way to inspect elements in your markup is to use the "Inspect" feature. The Inspect link is located at the top left of the Firebug window. Click on the link and then drag your mouse around elements on the page itself. As you hover over areas on the page, boxes will appear around page elements indicating that they are selectable. Simultaneously, the HTML pane in the left side of the Firebug window will move to and highlight the section of code corresponding with the element you are inspecting on the live page. Once you have made your selection, click the mouse on the element to lock the code in the Firebug window.

There is one last way to inspect elements and produce the same effect as described above. Right click on any element on the page and you'll notice an "Inspect Element" option at the bottom of the contextual menu. This will allow you to pinpoint element selection without entering the Firebug panel.

Live Tweaking: Changing HTML & CSS

Now that we've mastered element inspection, let's move on to the most powerful feature of Firebug: live editing. Before Firebug, web developers had to make edits to their code, and then reload the page in a browser to see a change. When experimenting with layouts, colors, or styles of any kind, this can be a tedious process. Firebug cuts this experimentation time in half by allowing you to see your edits in real-time.

Get started by going back to our trusty Inspect link at the top of the firebug window. Select any element on the page that contains CSS styles. For my example, I have selected an h1 element with a "color" property set to #33333 (dark gray) and a "font-style" property set to italic. I can change the color property by selecting the color value in the CSS pane of Firebug. I have changed this selected value to "#ff0000" to display a red text instead of the dark gray. Instantly, the text on the live page is changed to red. I can change the other attribute "font-style" to the value "normal" to take away the italics. Again, this style is updated instantly on the page.

You can play around with different values on different elements to test other property types. On certain properties, where there are a set list of values, you can use the arrow keys to select your value. For example, if we click on the value for our "font-style" property again, we can use the up and down arrows to cycle through the possible values: "normal", "oblique", "italic", and "inherit". Once you have made your choice, press enter to see the change on the live page. This selection method is especially useful on properties with measurement values, such as "width", "margin" or "padding". I will go into more detail on this functionality in part II of this posting.

Now that we know how to do live tweaks on our CSS, lets try making an edit to the HTML code itself. Inspect an element on the page and click on the "edit" link in the top-left corner of the Firebug window. The left window will turn into an editable text area where you can change the content to whatever you want. This can be used for changing tags, content within tags, or anything else you could change with a conventional code editor. Keep in mind that changing tags may affect the appearance of content because of the style definitions.

There are many details to explore when editing in Firebug, and I will try to present some of those concepts in subsequent postings on this subject. One thing to keep in mind is that all "live" changes made are not actually affecting the code on the site, but simply affecting your current view of the code. Once the page is refreshed, all changes will be lost as the original code will be reloaded.

Step 3: Now That You're Hooked, Find Out More

After being introduced to the world of Firebug, it's nearly impossible to go back to editing the old fashioned way! If you'd like to find out more information about Firebug, click on the colored Firebug icon in the top-left of the Firebug window. Follow the link for Documentation for detailed instructions on all of Firebug's features, or check out the Discussion Group link for forum discussions surrounding user opinions, known issues, and future development plans. There is still a lot more to talk about, but hopefully you have gotten your feet wet enough to comfortably explore Firebug on your own.

Stay tuned for part II of the Firebug series, where I will delve into the more advanced features that this incredible debugging tool has to offer.