close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Web development tutorial

Using Firebug

Tutorial created by Team WebAssist

Categories: CSS, Design, Javascript

rating

Firebug (http://getfirebug.com) is a Firefox add-on that extends the browser with some very helpful web development tools. The tag line on their website says it best, “You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page." The key phrase here is “live in any web page.” Firebug can be activated for any site on the internet and allows you to interact in a number of ways. Throughout this road map, we will explain some of the common scenarios that we use on a daily basis.

arrow downInstalling 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.

arrow downUsing 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/.

arrow downEditing 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.

These changes will be lost once you reload the page, so make sure you edit your actual source code with any changes you want to keep.

arrow downMonitoring 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.

The Net tab can be filtered to only show certain type of requests. For our example, we could have selected XHR which would have shown only XMLHTTPRequest calls (which is AJAX).



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.

arrow downOther 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.

arrow downIn 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.

arrow downReviews 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.

Sign in to add comments
rating

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

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.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.