The first step is to install the Firebug extension.
After installation, restart Firefox. You can invoke Firebug on any web page, using the bug icon (toolbar placement varies) or via your Firefox menu.
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/.
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.
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.
There are tons of other things that Firebug can be used for. Here are some more things you can explore on your own.
For more information: http://getfirebug.com/errors.html
For more information: http://getfirebug.com/cl.html
For more information: http://getfirebug.com/logging.html
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?
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.
Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.
These out-of-the-box solutions provide you proven, tested applications that can be up and running now. Build a store, a gallery, or a web-based email solution.