Debugging Techniques - Java Script

Before JavaScript debuggers were readily available,developers had to use creative methods to debug their code.This led to the placement of strategically placed alerts,using LiveConnect to access the Java console, using the JavaScript console, and throwing custom errors.Each of these techniques has its advantages and disadvantages. Which one should you use? This section explains which debugging technique is right for you.

Using alerts

The most popular(although the most unwieldy) method of debugging is the placement of alerts strategically throughout code. For example:

JavaScript developers around the world turn to alerts as a quick and dirty approach for debugging.The most popular way is to show alerts with descriptive text,as in the previous example. Some also use a numbering method,starting the first alert at 0,the second at 1, and so on,to see where the code breaks.

This approach requires a lot of cleanup because you must remove the extra alerts when your debugging is complete. Another problem occurs when dealing with infinite loops: If your script is causing an infinite or long-running loop,alerts could keep popping up and prevent you from closing the browser.for this reason,using alerts for debugging is best kept to small code segments.

Using the Java console

In browsers that support LiveConnect you can use the Java console to log messages to yourself just as you can in Java.

For example,in Java you can log messages to the console window by doing this:


In JavaScript,you can do the same by expanding the System variable into its full java.lang.System notation:


Placing calls like this into a function is a great way to track code execution:

To see the output,select Tools ➪ Java Console. You see the output after the default Java console output

output after the default Java console output

Posting messages to the JavaScript console (Opera 7+ only)

In Opera 7+, it’s possible to write message directly to the JavaScript console by using the opera.postError() method:

Even though the method is called postError, it can be used to post any message to the JavaScript console

Posting messages to the JavaScript console (Opera 7  only)

The Opera JavaScript console works in the same way as the Java console when used for debugging. The only problem is, of course,that this code must be removed for use in other browsers.

Throwing your own errors

One of the best ways to manage debugging and errors in JavaScript code is to throw your own errors. Now, you may be thinking, “How do I reduce errors by causing errors?” The idea is that you throw specific errors that tell you exactly what error occurred instead of relying on JavaScript’s cryptic object expected error messages.Doing so can cut down debugging time dramatically. Consider a function designed to divide one number by another:

This function assumes several things. First, it assumes that two arguments are passed in; second,it assumes that both arguments are numbers. But if you make a call that breaks these assumptions, such as divide(“a”), you end up with an error message like undefined’ is not an object or iNum2 has no properties. Add some specific error messages, and the problem becomes clear:

In this case, if you call divide(“a”), you’ll get an error saying divide() requires two arguments; if you call divide(“a”, “b”), you get an error saying divide() requires two numbers for arguments. In both cases,these messages give you much more information than the default JavaScript error messages and make debugging much easier.

Because of the amount of code required to check for errors and throw messages, many developers create their own assert() function. Many programming languages have an assert() method built-in, and it’s also easy to create your own:

The assert() function simply tests to see if the first argument evaluates to false and, if so, throws an error with the given error message.You can then use assert() like this:

As you can see,this reduces the amount of code contained in the divide()function and also makes it clearer what the developer was thinking when writing this function.

The JavaScript Verifier

Douglas Crockford,a software engineer,wrote a small tool called jslint — The JavaScript Verifier.The purpose of jslint is to point out unprofessional JavaScript syntax and possible syntax errors.You simply paste your JavaScript code (either pure JavaScript code or code enclosed in a <script/> tag) into a textbox and click the jslint button. The tool then outputs warnings and errors about your code underneath.

The types of warnings provided by jslint are in line with the professional standards mentioned throughout .You receive a warning if the code contains an inappropriate coding technique, such as the following:

  • A statement (if, for, while, and so on) that doesn’t use block notation
  • A line that doesn’t end with a semicolon
  • A var statement declaring a variable name that is already in use
  • The with statement

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

Java Script Topics