Debugging

CSE 190 M (Web Programming), Spring 2007

University of Washington

References: Dr. Dobb's

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

Valid XHTML 1.0 Strict 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 BUG: spelling error

window.onload = initalizeBody;   // spelled wrong
...
function initializeBody() {
    var theDiv = document.getElementById("puzzlearea");
    ...
}

COMMON BUG: bracket mismatches

function foo() {
    ...
    
function bar() {
    ...
}

COMMON BUG: () in event handler

myObject.onclick = handleClick();   // BAD!
myObject.onclick = setSpeed(200);   // BAD!
myObject.onclick = handleClick;     // better

window.onload variation

window.onload = initializeBody();   // BAD!
...
function initializeBody() {
    var theDiv = document.getElementById("puzzlearea");
    ...
}

"But I need parameters in my handler!"

COMMON BUG: misuse of .style

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

COMMON BUG: incorrect units on styles

theDiv.style.left = 100;   // BAD! should be "100px"
theDiv.style.top = 200;    // BAD! should be "200px"

Debugging in Firebug

Firebug JS Debugger

Breakpoints

Firebug breakpoint

Stepping through code

Firebug breakpoint

Debugging CSS property code

Firebug Debug CSS

Debugging Ajax code

Firebug Ajax

Debugging responseXML

Firebug Debug Ajax

General good coding practices