Learn Javascript

Finding and Fixing Errors

Introduction

No matter how careful you are when writing your Javascript programs (or any other programs for that matter), you will make mistakes in your coding. Writing error free code that works perfectly the first time you test becomes less and less likely as the number of lines of code increases. This is why testing your code is so important.

You test a program by running that program. Since most Javascripts are attached to web pages and interact with the web page, displaying the web page and seeing what the script does in response to different actions is a must do. 

The biggest problem with this is that often the program fails to do what is required in such a way that it is impossible to tell from what happens on the page just where the script is going wrong. What you need is some tools to kelp you to find and fix those hard to spot errors. Fortunately there are a number of tools available that will assist you with this.

Browser Options

Testing Javascript in multiple browsers is even more important than testing your HTML in different browsers because the browsers differe more from one to another in how they process Javascript than they do in how they process HTML. In addition the different browsers also give us different facilities that will aid us in testing our Javascript and so what we can't figure out using the tools available in one browser we may be able to figure out using the tools available in a different browser. 

Probably the first place that you want to start testing your page is in Internet Explorer. This is not only because that is the browser that most visitors to your page will be using which makes it most important to make sure that it works correctly in that browser but also IE has a very useful option that will tell you where there are errors in your Javascript code.To make sure that this option is turned on go into the Tools menu and then into Internet Options. On the Advanced page scroll down to Browsing and make sure that Disable script debugging is not checked. When you execute Javascript code with this option turned off Internet Explorer will produce error messages identifying the position in your code where the script failed to function. Even if you have this option turned off (by checking it) you can still display the error details by double clicking on where it says "Done but with errors" at the left of the status bar. 

Netscape and Mozilla have two options that will help you with coding and testing your Javascript. These are the Javascript Console and the Javascript Debugger. You will find them if you open the Tools menu and then Web Development. Forefox also has the Javascript Console available directly from the Tools menu. 

Opera has a Javascript Console option as well which can be accessed by going into Tools and then Advanced. 

Using Alert  

The biggest problem with these tools is that they tell you where your code isn't working but they don't help as much when the code works but doesn't do what it is supposed to. What we need is a way to track the code that is being executed and see what values are held in various variables at various points in our code. 

The alert() function is our best friend when it comes to doing this. If you go through your code and add alert('a'); near the top of your Javascript and alert('b'); a few statements further down and so on threough the code then you will soon be able to track the path that is being followed through the code by seeing which alert messages pop up. Once you have identified the problem area you simply remove the alerts from the rest of the program and add more into the problem area until you figure out the exact path being followed. 

You can also check the values of variables at given points in your code by specifying the variable name instead of a static character string in the alert call. 

The only possible problems with using alert statements like this is that if you add too many at once it may take too long to step through your code so you need to space them out to start with, identify the general area where the problem is occuring and then move them closer together to narrow down the problem area. Also you may inadvertantly leave an alert in an infrequently used path within your program when you finish testing. You can avoid this second issue if you always comment the alerts you add for testing with a comment such as // test on the end and search for that comment when you are finished so as to make sure that all of your testing alerts are removed but that the alerts which form a part of your final program are left where they belong. 

If you are creating functions that you intend to use in a lot of different web pages then you may want to add debugging alerts more permanently into those functions to allow for them to be easily tested with future page functionality. You can do this by coding your function as follows: 

var debug = false;           

function myFunction() {  
if (debug) alert('start of myFunction');           
function code goes here 
}

When you need to check whether functions like this are being called from your new code you simply set debug to true to turn on all of the alert statements in the beginning of your functions. You then don't need to alter the code of your existing functions (and risk breaking them where they are used on your other pages) in order to be able to tell when they are being called. Since thes functions will have already been tested when you first created them, knowing whether they have or haven't been called is usually sufficient and you shouldn't need to add testing alerts elsewhere within those functions.

Bookmarklets

Bookmarklets are small Javascripts that can be run from the bookmark or favorite menu instead of from within web pages. Some, such as the View Source bookmarklet which shows you how the page looks to the web browser after any Javascript has run, can be useful aids to testing your Javascripts.