📖 Debugging JavaScript

Tips and Techniques

Debugging your JavaScript code can be very challenging as there is very little feedback to help you. Here are some suggestions to get you started. Also, if you really get stuck, you can send me your code and I'll take a look at it, but make sure you go through these steps first.

  • Make the changes to the existing pages one at a time and test after each one. This allows you to debug each item individually instead of trying to do it all at once.
  • If you have made a lot of changes and you can't tell where the error is occurring, comment out sections of the code until you get it to work. This can help narrow down where the error is.
  • Using an editor (such as Aptana Studio, Notepad++ or Dreamweaver) that uses color-coding and predictive text can help cut down on syntax errors. Look for places in your code where it all goes one color, usually grey or black. Good code will be multi-color.
  • Check your curly brackets { }. Make sure they are matched up (every opening bracket has a closing bracket).
  • Check your quotation marks " ". Make sure you have a closing quote (") for every opening quote("). (This can give you some really weird errors.)
  • Make sure that if you are using the equal sign (=) in an if statement that you use the double equal sign (= =). If you only use 1, it will actually assign the value on the right to the variable on the right.
  • Check for spelling errors of JavaScript commands.
  • Check to be sure that your variable names are spelled the same and that the same capitalization and lower case letters are used.
  • Remember that JavaScript is case sensitive and myVar is a different variable than MyVar.
  • Check to make sure that each JavaScript statement ends with a semi-colon (;).
  • Make sure you have parentheses around the conditional in if statements (i.e. if (x == 10) {y = 20})
  • Check for missing dots (.)
  • Use alert(); boxes or console.log(); to display variable values to help you find the source of errors or to tell you if you actually got to a particular place in the code. For example, you can put an alert as the first statement in each function with the name of the function (i.e. alert("mathQuest");) to see if it reaches that point. Just be sure to remove these debugging alerts before you turn in the final working program.
  • Internet Explorer can actually help you find syntax errors in your code, but you have to turn on the error checking (btw, once you do this, if you leave it on, you'll be surprised how many Web pages out there come up with JavaScript errors!)
  • In FireFox, click on Tools, Web Developer, Toggle Tools (Ctrl+Shift+i) to see any syntax errors in your code. Be sure to clear out the console before you start as many existing web pages have JavaScript errors in them. Also clear after each run to make sure you're not just seeing the error from the prior test. The latest errors will appear at the bottom of the list.
  • Use the Firebug add-on in Firefox to help see what is happening when you run your code. The tutorial in the book is very good.
  • Google Chrome also has Web Developer Tools that can help you find your errors. Right-click the page and select Inspect. Click the Console tab to view JavaScript errors.