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
- 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() {
...
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