Web Programming Step by Step

Lab 5
JavaScript Debugging

Reading: 7.2

Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller.

Valid XHTML 1.1 Valid CSS!

Debugging common errors (7.2.6)

Debugging JS code in Firebug

Firebug JS



Debugging checklist

"My program does nothing"

Since Javascript has no compiler, many errors will cause your Javascript program to just "do nothing." Some questions you should ask when this happens:

Is my JS file loading?

Is it reaching the code I want it to run?

Object 'foo' has no properties

Common bug: bracket mismatches

function foo() {
	...   // missing closing curly brace!

function bar() {

Firebug's debugger

Firebug JS Debugger


Firebug breakpoint

Stepping through code

Firebug breakpoint

Debugging CSS property code

Firebug Debug CSS

General good coding practices