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.
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.
On the Firebug home page, click Install Firebug (or similar link/button, if the verbiage changes).
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.
On the Mozilla Add-ons page for Firebug, click the Add to Firefox button.
Firebug will download and install.
In the Software Installation dialog, click Install Now.
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.
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 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: