This exercise assumes that you already have a recent version of Firefox installed.
There are two ways to get Firebug:
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
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)
Two Views of the CSS tab
Two Views of the DOM tab
Let’s take a closer look at the results of using the 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
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.
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
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?
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