Identify JavaScript Problems with Firebug - dummies

By Steve Suehring, Janet Valade

Alerts and comments work well as troubleshooting tools in JavaScript. However, an indispensable tool for the JavaScript programmer is a tool called Firebug, which is an add-on to the Firefox web browser. It contains advanced JavaScript debugging tools as well as several other tools related to web development. Firebug identifies problems with JavaScript code as it executes and helps to quickly find solutions.

You need to have Firefox already installed. If you don’t, go get it at Mozilla before you continue.

Firebug isn’t the only tool that can be used for debugging. Internet Explorer has a tool called F12 Developer Tools, and Chrome has its own set of developer tools too. However, Firebug is quite robust and easy to use, so that’s what we cover here.

Install Firebug

You install Firebug as an add-on for Firefox. Installation is straightforward but does require restarting Firefox afterwards. Follow this procedure to install Firebug.

Although, this procedure may change slightly by the time you read this, the overall process is the same: Use Firefox to download and install the Firebug add-on. However, the locations and names of links may change.

  1. Open Firefox.

  2. On the Firebug home page, click Install Firebug (or similar link/button, if the verbiage changes).

  3. On the Downloads page, click to download the recommended version of Firebug.

    This will usually be the top link for newer versions of Firefox. You initiate the download process by clicking the Download link, which takes you to the Add-ons page.

  4. On the Mozilla Add-ons page for Firebug, click the Add to Firefox button.

    Firebug will download and install.


  5. In the Software Installation dialog, click Install Now.


  6. When you are prompted to restart Firefox, click Restart Now.

    Firefox will restart and you’ll be shown the Firebug home page again.

Congratulations. Firebug has been installed. Now take a spin around the block with it.

How to use Firebug

When Firebug is loaded, it gets put into the toolbar in Firefox. The Firebug icon is typically found in the upper-right corner of Firefox.


Clicking on the Firebug icon reveals the Firebug console, for whatever page you’re currently on.


You can click on the various tabs within the Firebug interface to see some of the options. When debugging JavaScript, you’ll frequently use the Console Panel. However, the Console Panel may be disabled by default.


Enabling the Console Panel involves clicking the down arrow next to the word Console and selecting Enabled. When you do so, the Console Panel will be enabled. However, you need to reload the page in order for any errors or other information to show up in the Console Panel. Pressing the Ctrl+R or Command+R key combination reloads the page in Firefox.

The same process is needed to enable other panels in Firebug, such as the Net Panel. The Net Panel shows the retrieval of elements on the page, including all JavaScript, CSS, images, and other elements. It also shows the response code, which can sometimes be helpful to show that a certain file isn’t loading.

The Net Panel also shows timing information so you can see how long it took the browser to download the various page elements too.


If you’re using Firebug or the Chrome browser, you can also take advantage of another means for troubleshooting, called console.log. Using console.log, the results of whatever you’re debugging are shown within the developer tools area’s Console tab. The console.log feature is used like an alert:

console.log("hello world");

Spend some time with Firebug to get to know its uses and how it can help with your JavaScript programming. Once you get familiar with the tool, it will become indispensable for you!