Debugging JavaScript, Part 1

Sometimes, perhaps often, we write code that has problems or just doesn't work. This module explores strategies for figuring out what's wrong and fixing it.

In general, we have two kinds of tools for exploring errors.

• The console, which we can use to print messages at various points along the way in an effort to isolate the problems.
• Debuggers, which help automate the task of find the errors. Debuggers fall into two categories:
  • The debugger built into the console, which may show you compile-time errors in your code.
  • Alternative debuggers, such as Firebug for Firefox, which may help you find errors in your code as it's running, known as run-time errors.

We may encounter two different kinds of errors as we're attempting to put a project together.

• Compile-time errors are also known as syntax errors and they can be such mistakes as spelling errors, misplaced or missing parentheses, semicolons, commas, etc. These kinds of errors often prevent the program from running at all.
• Run-time errors are not due to syntax mistakes but instead due to logic mistakes. So the program may run, but it may not do the right thing.

Compile-Time Errors

Compile-time errors include anything that is a violation of project JavaScript syntax. Common syntax errors include:

• Spelling errors
  • Misspelled keywords, such as for, while, function, if, switch.
  • Misspelled library function and property names, such as getElementByID instead of getElementById, etc.
  • Mismatched variable names, such as colorswatches in one place, and colorSwatches in another place.
  • Note that like most programming langauges, JavaScript is case-sensitive, so mismatches in upper case vs. lower case letters can have a big impact.
• Brackets errors
  • Extra or missing or mismatched brackets: parentheses ( ), square brackets [ ], curly brackets { }, angle brackets < > (usually in HTML, not JavaScript).
  • Using the wrong kind of brackets, particularly in
    • functions, which use both parentheses and curly brackets in different places,
    • arrays, which use square brackets,
    • objects, which use curly brackets, and
    • arrays of objects, which use both square brackets and curly brackets in different places.
• Missing semicolons and commas.

Run Time Errors

Run time errors are hard to detect before running the program. There may not be any spelling errors that might be a warning that something is wrong. So when you run the program, it either

• does the wrong thing, or
• crashes, or
• both.

Examples of common run-time errors include:

• Forgetting to update the condition variable in a for or while loop, which can cause an infinite loop. (This can eventually cause a crash if the computer runs out of memory, or it may just lock up your computer until you quit and restart the browser.)
• Trying to access an array index that is out of bounds (beyond the end of the array), which can cause a crash.
• Trying to divide by zero, which can cause a crash. No one does this on purpose, but what if the user enters zero (0) and you try to use their input in a math calculation?
• Not paying attention to operator precedence (PEMDAS), which can cause a calculation to return the wrong result, such as the wrong bank balance.
  
• Wrong logic for if, &&, and ||, which can cause you, for example, to go outside if it is cold and rainy.