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.

Debugging common errors (7.2.6)

• JavaScript's syntax is looser than Java's, but its errors are meaner
  • most errors produce no visible output or error message!
• some common error symptoms:
  • My program does nothing. (most errors produce no output)
  • It just prints undefined. (many typos lead to undefined variables)
  • I get an error that says, foo has no properties.

Debugging JS code in Firebug

• Firebug JS debugger can set breakpoints, step through code, examine values (Script tab)
• interaction pane for typing in arbitrary JS expressions (Console tab; Watch tab within Script tab)

JSLint

• JSLint: an analyzer that checks your JS code, much like a compiler, and points out common errors
  • Marty's version
  • original version, by Douglas Crockford of Yahoo!
• when your JS code doesn't work, paste it into JSLint first to find many common problems

Debugging checklist

• Are you sure the browser is even loading your JS file at all?
  Put an alert at the top of it and make sure it appears.
• When you change your code, do a full browser refresh (Shift-Ctrl-R)
• Check bottom-right corner of Firefox for Firebug syntax errors.
• Paste your code into our JSLint tool to find problems.
• Type some test code into Firebug's console or use a breakpoint.

"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 the browser even loading my script file?
• If so, is it reaching the part of the file that I want it to reach?
• If so, what is it doing once it gets there?

Is my JS file loading?

• put an alert at the VERY TOP of your script:
  
• if it shows up, good!
• if it doesn't show up:
  • maybe your HTML file isn't linking to the script properly
    • double-check file names and directories
  • maybe your script has a syntax error
    • check bottom-right for Firebug error text
    • comment out the rest of your script and try it again
    • run your script through JSLint to find some syntax problems

Is it reaching the code I want it to run?

• put an alert at the start of the appropriate function:
  
  • write a descriptive message, not just "hello" or "here"
• if it shows up, good!
• if it doesn't show up:
  • if it's an event handler, maybe you didn't attach it properly
  • maybe your script has a syntax error; run JSLint

Object 'foo' has no properties

• these errors mean you are trying to utilize an undefined value:
  • Object foo has no properties
  • ReferenceError: foo is not defined
  • TypeError: foo.bar is not a function
• possible causes:
  • you're trying to access a variable that is out of scope
  • you're trying access a DOM element with an invalid id
  • you've run off the bounds of an array
  • you've spelled the variable's name incorrectly

Common bug: bracket mismatches

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

function bar() {
	...
}

• JS doesn't always tell us when we have too many/few brackets
  • (it is legal in JavaScript to declare one function inside another)
• symptom: script becomes (fully or partially) non-functional
• detection: bracket matching in TextPad (highlight bracket, press Ctrl-M); using an Indenter tool; JSLint

Firebug's debugger

• open Firebug, click Script tab
• click to the left of a line to set a breakpoint
• refresh page; when script gets to that line, program will halt

Breakpoints

• once stopped at a breakpoint, you can examine variables in the Watch tab at right
  • can click + to see properties/methods inside any object
  • this variable holds data about current object, or global data
  • if the object is global or not listed, type its name in the "New watch expression..." box

Stepping through code

• once stopped at a breakpoint, you can continue execution:
  • continue (F8): start program running again
  • step over (F10): run current line of code completely, then stop again
  • step into (F11): run current line of code; if it contains a call to another function, go into it
  • step out (Shift-F11): run the current function to completion and return, then stop

Debugging CSS property code

• expand DOM object with +, and expand its style property to see all styles
• also look at HTML (left) tab, Style (right) tab to see styles

General good coding practices

• ALWAYS code with Firebug installed
• incremental development: code a little, test a little
• follow good general coding principles
  • remove redundant code
  • make each line short and simple
• use lines and variables liberally
  • it's good to save parts of a complex computation as variables
  • helps see what part of a big expression was bad/undefined/etc.
  • blank lines and profuse whitespace make code easier to read
• don't fear the Firebug debugger