Basic JavaScript Troubleshooting Techniques - dummies

By Steve Suehring, Janet Valade

The primary technique for troubleshooting technical problems in JavaScript is to stop. Stop what you’re doing and remain calm. Many very smart people falter when things go wrong — and things do go wrong.

Once you’ve done that, look at the problem from different angles and reduce it to small parts. For example, you’ll encounter problems with web pages that you’re programming. The problem could be that the page isn’t loading, the page doesn’t look right, or something else. Consider whether the problem is with the database, with the PHP, with the server, with the JavaScript, or none of those — or more than one.

If you think the problem is with the JavaScript, take the JavaScript out of the page entirely. Then slowly add it back in. Another way to troubleshoot JavaScript is by adding the alert() function in various places. As you do your troubleshooting, you can add comments in the code to help with your troubleshooting efforts.

Add JavaScript alerts

A good way to troubleshoot JavaScript is by using the alert() function within the code to show the value of variables or simply to show where you are in the code.

A common occurrence with JavaScript is that you’ll have a long program and you won’t be able to quite figure out why the program isn’t getting all the way through. Adding an alert on line 1 of the program can show you whether or not it’s even getting called.

Then adding an alert on line 50 will show if the program is getting that far. If it isn’t, then you know that there must be a problem somewhere between line 1 and line 50.

Adding alerts is an easy and efficient way to help in troubleshooting complex problems. You simply add code like this:

alert("Just executed this code!");

Alternatively, if you need to show the value of a variable named myVariable, you’d do this:


Notice the lack of quotes around the variable name. If you put quotes around the variable name, JavaScript will interpret that as a plain old string and so you’ll only see the name of the variable and not its contents. You could also get fancy and concatenate them:

alert("The value of the variable is:  " + myVariable);

That code would show not only friendly text, but also the value of the variable itself.

Be mindful of using alerts in a loop structure since you need to dismiss each one manually in the browser. Also be sure to remove any alerts prior to releasing the code for production use on your real website. If you don’t, website visitors will find the site really annoying.

Use comments in JavaScript

Comments help with documenting code, which can be greatly helpful when you need to update or change the code later. You can also use comments to help with troubleshooting.

Comments are not only useful for documenting the code, but they can also be helpful for troubleshooting. For example, if you’ve identified a problematic area of the code you can comment that part out temporarily in order to get past the problem.

In JavaScript, comments come in two forms.

  • //: You can use a double slash as a single line comment.

  • /* and */: You can use the slash-asterisk format for comments that span multiple lines.

Here’s an example of the single line comment:

// This is a single line comment.
var myVariable = 77;

In this example, the first line that begins with two slashes will be ignored by the JavaScript interpreter but it will create and assign the variable in the next line because that’s not commented out.

You can comment lines of code out. So in the preceding example, if you wanted to comment out the var myVariable = 77 line, you’d simply add two slashes in front of the line, like this:

// var myVariable = 77;

Anything that appears after the two slashes up to the end of the line is considered a comment and ignored.

If you want to comment out multiple lines or create a multi-line comment, you use a single slash with an asterisk to open the comment block and then an asterisk and single slash to close the block. Anything appearing between these will be ignored. Here’s an example.

Everything within this area is a comment and will be ignored.
This includes normal lines like this and also code lines, like:
if (myVariable = "something") {
   return false;

In that example, all the code will be ignored because it appears in a comment block.

It’s important to note when using multi-line comments that you can’t nest them. For example, this is invalid:

Another multi-line comment
/*  A comment in a comment */
Ending the comment

Once the JavaScript interpreter encounters the end */ code, it will assume that the comment has ended and therefore won’t know what to do with the next */ that it encounters. You can still use the double-slash construction, like this:

Another multi-line comment
// A comment within a comment
Ending the comment

JavaScript can be seen by everyone viewing the source of your web page, so be careful what you display in the comments. Placing sensitive (or offensive) information in the comments of the code can get you in trouble!