All JavaScript programmers — beginners and experts alike — have times when they write a program that seems like it should work, but it just doesn’t. Computers will always run programs that are coded correctly, so how do you find the error in your code? Where do you start looking and how do you track it down? Here are some tips for the first things you should look for when a JavaScript program just won’t run.
Check the console
The JavaScript Console in Google’s Chrome browser will tell you if there’s an error, even if it doesn’t always tell you exactly what the error is.
To open the JavaScript Console, select More Tools → JavaScript Console from the Chrome menu.
If you see an error in the console after running your program, it will often include a line number and a link. Click this link to open the spot in the JavaScript where Chrome thinks things went wrong in your program.
If you don’t spot the error immediately (which often is the case), move on to the next tip.
Look for misspellings
JavaScript is picky. Capitalization in variable names as well as in JavaScript keywords makes all the difference. Some JavaScript function names, such as getElementById, are notorious causes of errors as a result of programmers capitalizing them wrong.
Look carefully at each variable name and function name. A code editor that includes JavaScript code hints and code coloring can be a very valuable tool when looking for misspelled words. Some code editors will apply a special color to function names that are spelled correctly, while coloring misspelled names differently.
Check your brackets
Mismatched brackets or parentheses are a common cause of errors. Check to make sure that every parentheses, square bracket, or curly bracket that you open ({) has a matching closing bracket (}).
Match up your quotes
JavaScript will recognize both single and double quotes as holders for strings. But if you start a string with a single quote, it needs to end with a single quote. The same goes for double quotes.
Use console.log()
The console.log() function is a useful tool for figuring out where a program goes wrong. Insert console.log() statements throughout your code while debugging to print out the values of important variables. For example, if you have a loop in your program, you can make sure that the loop is running correctly by putting a console.log() statement inside it like this:
for (var i = 0; i < 10; i ++) {
console.log("the value of i is: " + i);
}
This statement won’t change what happens in the browser window, but if you look in the JavaScript console, you’ll see log entries, indicating that the loop is functioning properly.
Take a break
Sometimes, the best way to debug a program is to walk away from it and take a break. Get a glass of water, take a nap, read a book, or do anything but stare at the program and pull out your hair. When you return to the program, you’ll be refreshed! And the answer to the problem may appear obvious to you!