Using Firebug

Tutorial created by Ray Borduin, WebAssist

Categories: CSS, Design, Javascript

1 ratings | Sign in to rate this tutorial | View comments

next section

Installing Firebug

The first step is to install the Firebug extension.

https://getfirebug.com/



After installation, restart Firefox. You can invoke Firebug on any web page, using the bug icon (toolbar placement varies) or via your Firefox menu.

next section

Using Firebug for the first time

Navigate to http://www.webassist.com/, then click the little bug icon to show the Firebug interface. We like to have the Console, Script, and Net tabs enabled for all sites that we 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/.

next section

Editing HTML and CSS in Real Time

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

To give this a try, click the Inspect button, then click the search field at the top of the page. You'll notice the HTML code for the input form field 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 in any of the CSS properties (such as background-color or width) to make edits to the input field. You can even add new CSS properties. Notice the search field change on the web page as your edits are made.

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 search field. As an example, we can quickly change the value of the input field.

Double click on value and tab to the empty quotes. Type anything you want, such as eCart, and notice the text in the search field update.

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

next section

Monitoring AJAX Calls

AJAX is quite common these days; 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.

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

next section

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 we 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, Chrome, Safar, and Internet Explorer 7+. 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 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 us be efficient in our 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.

Reviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

1 ratings | Sign in to rate this tutorial