Debugging JavaScript using proactive logging

Hi guys,

JavaScript is a language which is quite flexible and this can both be a boon as well as a curse if not used correctly. Since we use JavaScript while developing our applications I wanted to share a tip that would make the debugging process much less cumbersome. Always insist on logging to the console the branch that your code is taking using the console.log method that comes out of the box with JavaScript. This helps you to log output on the special console window that all major browsers possess.
Pressing F12 in Firefox, Chrome and IE opens the "Dev tools" window in these browsers and you can see a tab that will be titled as console. Here are a few examples:


Internet Explorer




Chrome

You can thus use the console.log(""); method and use it in your code and observe the output in the log output window of the browser. Logging should be for each of the branch that your program can take. This makes it clear once your script executes as to what path the program took and it will help you visualize the same. Here is an example:

var userName = $("#txtBox").val();
if(userName)
{
 console.log("The user name is: " + userName);
  // other logic goes here
}else
{
console.log("There is no value in the user name text box");
}

You can see in the above that all the details of the execution are being logged which includes the values that are being used (in the if clause) and also in case there are no values in the else clause. This really helps when the script has grown in size and there is a need to obtain what is going on in your script.
This also prevents the "silent failing" of your code. Imagine a scenario where the user name is a mandatory field on a form and due to some reason the client side logic to check the requirement level for the field has not fired. Since the user does not enter any data, the else part of the above code would run and without logging you would never realize that there is something wrong unless you have some explicit unexpected functional behavior.

So logging is the way to go and a glance at the log output will tell you exactly what had happened and why your program executed the way it did!

Hope this article makes developing and debugging your JavaScript applications a little easier and helps you save some time!

Please post your comments in case you have any.

Cheers,
Anurag