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.

Debugging common errors

• 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

JavaScript "strict" mode

"use strict";

your code...

• writing "use strict"; at the very top of your JS file turns on strict syntax checking:
  • shows an error if you try to assign to an undeclared variable
  • stops you from overwriting key JS system libraries
  • forbids some unsafe or error-prone language features
• You should always turn on strict mode for your code in this class!

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

• open Firebug / Chrome dev tools, 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 / Chrome console open
• 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