Debugging JavaScript Code

CSE 190 M (Web Programming), Spring 2008

University of Washington

References: Dr. Dobb's

Except where otherwise noted, the contents of this presentation are © Copyright 2008 Marty Stepp and Jessica Miller and are licensed under the Creative Commons Attribution 2.5 License.

Valid XHTML 1.1 Valid CSS!

"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 reach?

COMMON ERROR: 'foo' has no properties

COMMON BUG: spelling error

window.onload = initalizeBody;   // spelled wrong
function initializeBody() {

COMMON BUG: bracket mismatches

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

function bar() {

COMMON BUG: misuse of .style

var theDiv = document.getElementById("puzzlearea");
theDiv.left = "100px";                   // BAD! = myClickFunction;  // BAD!

COMMON BUG: incorrect units on styles = x;   // BAD! should be x + "px" = x + "px" + y + "px";    // BAD! missing space

COMMON BUG: incorrect usage of existing styles = this.getStyle("top") + 100 + "px";    // BAD!  String + Number = parseInt(this.getStyle("top")) + 100 + "px";

Debugging in Firebug

Firebug's debugger

Firebug JS Debugger


Firebug breakpoint

Stepping through code

Firebug breakpoint

Debugging CSS property code

Firebug Debug CSS

Ajax code bugs

When writing Ajax programs, there are new kinds of bugs that are likely to appear.

How do we find and fix such bugs?

Debugging Ajax code

Firebug Ajax

Debugging responseXML

Firebug Debug Ajax

General good coding practices