Web Programming Step by Step, 2nd Edition

Lecture XX: JavaScript Debugging

Reading: 8.2.6

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Valid HTML5 Valid CSS

Debugging common errors

Debugging JS code in Firebug

Firebug JS

JSLint

JSLint

JavaScript "strict" mode

screenshot
"use strict";

your code...

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/Chrome debugger

Firebug JS Debugger

Breakpoints

Firebug breakpoint

Stepping through code

Firebug breakpoint

Debugging CSS property code

Firebug Debug CSS

General good coding practices