Test Your Code

I often see forum questions with people asking why their JavaScript code doesn't work. In each case I could give the same answer - "You forgot to test it properly". Now that by itself isn't a great deal of help and so here I am going to explain some of the steps that you should follow in order to test your JavaScript.

Step One: Validate the code. If your code contains syntax errors then there is no way it is going to work. The validator will also identify pieces of the code that are poorly written and where the result of running the code is probably not going to be what you expect. The best JavaScript validator to use is jsLint where if you post your JavaScript code in the textarea and select "Assume a Browser" (assuming that your script is for a web page) then you will be supplied with a complete list of every syntax error in your code and also every spot in the code where the code is using poor programming practice and where therefore the code might run but potentially may not do what you expect. An alternative that doesn't give as many warning message if you use poor programming practice is jsHint.

Step Two: For small pieces of code that you want to test independently of the rest of the page take a look at jsBin or jsFiddle both of which allow you to post and run JavaScript online to test it prior to adding it into your page. If the script runs there but not in your page then it is conflicting with something else in the page. The first of these will also give you a list of warning messages about anything that it finds in your code that could be improved.

Step Three: Use the error console. When you can't work out just why the code isn't doing what you expect then add console.log() calls into the code to display the values that particular fields hold part way through the processing. With the browser error console open you can then see what values get written to the console log as the statements are run without the execution of the code being interrupted.

Step Four: Use the browser's built in debugger. Now that all browsers have a debugger built in you no longer need to go hunting for a plugin or extension in order to obtain full control of your testing. The debugger provides access to apply breakpoints at any spot in your code so that you can pause the code and see what all of the JavaScript variables contain at that point. You can also set it up so that you can step through a function line by line examining exactly what each statement does.

In most modern browsers the F12 key will open the browser debugging tools for you (including the error console).

So before you post your code on a forum asking for help in getting it to work, why not at least try some of the steps for actually testing your code. Proper testing will at least give you more information that you can include in your post. Even if you don't understand what the error messages mean, others will be more easily able to help you to work out why your code isn't working if you tell them what error messages you get from these testing steps. Not providing this information means that you are expecting others to perform these steps for you (assuming that the cause isn't so obvious that they spot it immediately just by looking at the code - something always much easier for anyone other than the original author to do). Even if you can't work it out yourself from the messages that these tests produce, including the messages in your request for help also demonstrates that you have at least made an effort to try to figure it out for yourself making it far more likely that others will help.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow