ICS 225 Web Design and Implementation
Lab 7: Debugging, Firebug and Images
Objectives: In
this lab, you will
·
Learn
how to use Firebug
·
Improve
your debugging skills
·
Create
a slide show
·
Create
thumbnails
Part
I: Firebug
1. Install or access Firebug
·
At Home: If
at home, follow the directions on page 473-474 to download and install
Firebug. Firebug is an extension to
Firefox, so you may need to download Firefox first if you do not have it on
your computer.
·
On Campus: If using lab computers at school, you
should see Firebug and the JavaScript debugger when you click Tools | Add-ons |
Extensions.
·
On Campus: If you do not see the add-ons, click
Tools | Add-ons | JavaScript Debugger | Find Updates | Install Updates. All of the JavaScript add-ons, including
Firebug, will then show up.
2. Practice viewing error messages from Firebug
·
Open a buggy script using Firefox. An example of a buggy script can be found at http://cs.metrostate.edu/~fitzgesu/courses/ics225/fall2009/examples/debugger/evenRowsEvents.htm
·
If you are trying to view a file located on the hard
drive of your own computer, you can right-click on the file name and Open With
Firefox if Firefox is not your default browser.
·
To view JavaScript errors, double click the Bug icon
found in the lower right corner of your browser window. (The red X will show you the HTML validation
errors.)
·
Click the Console tab and find the line with the
error. (You may have to Refresh the page to see the
error.)
3. Practice using the Firebug Console
·
Do the tutorial on page 477-481.
·
Add console.log() message to display the values of
variables and a trace of your program.
·
To view JavaScript errors, double click the Bug icon
found in the lower right corner of your browser window and look at the Console
tab. Or press the F12 key. Or click Tool | Firebug | Open Firebug.
4. Practice creating rollover images with the tutorial on p. 239-242.