Firebug

This exercise assumes that you already have a recent version of Firefox installed.

Firebug is a web development tool that integrates into the Firefox web browser (as an add-on). It allows you to inspect and edit html elements, CSS styles and layout, and debug and profile JavaScript, and analyze the network activity on web pages.

Installation

There are two ways to get Firebug:

Getting Started

To start Firebug, simply press F12 within Firefox.
To turn it off, simply click the power button at the top right of the Firebug panel.

The main Firebug tabs are:

Overview screencast: http://getfirebug.com/screencast.html

Video tutorial (JavaScript debugging): http://www.youtube.com/watch?v=2xxfvuZFHsM

Making Edits in Firebug

All HTML, CSS and JavaScript can be edited on the fly; edits take effect immediately.
NOTE: the original source page is NOT changed.

In the example below, we use the Style sub-panel of HTML tab to edit the color of the body color text color attribute from dark grey (#333333) to red (#FF0000).
When we hit the enter key, the text color changes immediately.


Original color attribute: dark grey (#333333)


New color attribute: red (#FF0000)

Experiment


HTML tab



Two Views of the CSS tab



Two Views of the DOM tab

Net Tab

Let’s take a closer look at the results of using the Net tab.

The Net tab graphs the request times for all http requests that make up a page. This is a way to test (and prove) that putting your JavaScript files at the bottom of your files, especially for JavaScript heavy pages, improves perceived download time. Total download time will be the same, but since browsers stop loading pages when they hit scripts until the scripts have been downloaded, the page will appear to download faster, which leads to a better user experience.


Net tab

In this particular example run on the USC home page, there were 45 requests, many of them for png and jpg image files.

Colors on each bar represent different phases of the request process:

When you click on the plus sign to the left of the file name, Firebug displays the HTTP headers of each file that was downloaded.


Expanding the request and response headers for HTML page

Script Debugging

Let’s try some simple JavaScript debugging.

Here is a simple program that takes two numbers, and finds the larger of the two. It will also find the greatest common denominator (GCD) of the two numbers using Euclid’s Algorithm.

Copy the following code to a HTML file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>Firebug Example</title></head>
<body>
<script language="Javascript">

function gcd(a,b) {
  if (b == 0)
  { return a; }
  else
  { return gcd(b, a % b); }
}

var input1;
var input2;
var biggest;

input1 = prompt("Enter first number:");
input2 = prompt("Enter second number:");
window.alert("First number is " + input1);
window.alert("Second number is " + input2);

if (input1 < input2)
{ biggest = input1; }
else
{ biggest = input2; }

document.write(biggest , " is the biggest.<br/>");

document.write("The GCD of the two numbers is ", gcd(input1,input2));

</script>
</body>
</html>

Start Firebug, open the page, and enter two numbers as requested. The resulting biggest number is incorrect. What went wrong? Let’s find out.
Set a breakpoint at line 18, and then refresh the page and enter your numbers again:


Setting breakpoint on line 18

Step over each JavaScript instruction using the U-shaped orange arrow or by pressing F10. Notice that as you provide the input numbers, they show up in the “Watch” subpanel on the right:


Input values (105 and 175) are displayed in Watch subpanel

Watch closely as you execute lines 23-26. The wrong value gets assigned into the “biggest” variable. Inspecting the code here, we see that the comparison on line 23 is incorrect!

Now set another breakpoint at line 30. When execution reaches that line, we will use the first orange arrow (or F11) to step into the function call to the gcd function.
Euclid’s Algorithm is implemented as a recursive function here. Notice that as you repeatedly step into the recursive function calls, the “Stack” subpanel on the right allows you to keep track of the call stack along with the parameters passed in each function call.


Using the call stack

Quiz: Euclid’s Algorithm relies on recursively dividing the larger number by the smaller one to find the remainder. However, the gcd function does not check for which of two numbers is larger before performing the arithmetic. Why does it work without throwing any errors even when the first parameter is smaller than the other?

AJAX Debugging

Let’s use Firebug to take a look at the inner workings of a simple AJAX example at http://www.evotech.net/articles/ajaxlesson.html

This webpage uses Yahoo’s library so that when the “My first AJAX” link is clicked, the callback of the callAJAX() function assigns the returned responsetext into the innerHTML of mydiv, replacing the original text with “This is my first AJAX call”.


Before and after clicking the link

By setting breakpoints in the Firebug script panel and stepping through the program execution, we can take a peek under the hood and understand how it works:


After the link is clicked, execution pauses at the breakpoint before line 44.


In the watch subpanel, we see that sUrl is now set


Callback function has been initialized


Transaction has been set

The University of Southern California does not screen or control the content on this website and thus does not guarantee the accuracy, integrity, or quality of such content. All content on this website is provided by and is the sole responsibility of the person from which such content originated, and such content does not necessarily reflect the opinions of the University administration or the Board of Trustees