The Basic Concepts of Debugging in JavaScript

Hello guys! Welcome to this tutorial post on JavaScript. In this tutorial post, am going to be explaining to you guys the various tools as well as the techniques that can help you with your debugging task.  

Every now and then, developers always make mistakes while coding. A mistake in a program or a script is known as a bug.

The process of finding and fixing bugs is called debugging  and is a normal part of development process.

Error Messages in Internet Explorer

The most common way to track errors in your code is by turning on the error information that is in your web browser. By default, Internet Explorer shows an error icon in the status bar of the browser when an error occurs on the page.

Double-clicking on the icon in the image above takes you to a dialog box showing information about the actual error that occurred.

Since the icon is very easy to overlook, Internet Explorer gives you the option to automatically show the error dialog box any time that an error occurs.

In order for us to properly enable this option, select Tool→Internet Option→Advanced tab. and finally click the "Display a Notification About Every Script Error" box option as shown below -

You can also read our tutorial post on: A Practical Guide to JavaScript Multimedia with examples

Error Messages in Mozilla or Firefox

Other browsers like Netscape, Firefox, and and also Mozilla send messages to a special page called the JavaScript Console or Error Console. To view this Console select Tool→Error Console or Web Development.

Unfortunately, since these browsers don't give any visual indication when an error occurs, you must keep the Console open and watch for errors as your script executes.

Error Notifications

Error notifications that show up on JavaSctipt Console or the through Internet Explorer dialog boxes are as a result of both syntax and runtime errors. These error notification includes the line number at which the error occurred.

If you are making use Firefox, then you can click on the error available in the error Console to go to the exact line in the script having the error.

You can also read our tutorial post on: JavaScript Loop Control

How to debug a Script?

Below are the various the various ways to debug your JavaScript Code -

Use a JavaScript Validator

One way to check your JavaScript Code for bugs is to is to run it through a program that checks it to make sure it is valid and that it does follows the official syntax rules of the language. These programs are called the validating parsers or just validators for short, and often comes with commercial HTML and JavaScript editors.

The most convenient validator for JavaScript is Douglas Crockford's JavaScript Lint.

Simply visit the website, paste your JavaScript code into the text area provided, and click the jslint button. This program will run through your JavaScript code, ensuring that all the variables and function definitions follow the correct syntax. It will as well check for the JavaScript Statements, such as if and while, to ensure that they also follow the correct syntax.

Adding debugging Code to your Program

You can use of the alert() or document.write() methods in your program to debug your code. For example you might write something as like the one below -

var  debugging =  true; 
var  whichImage  =  "widget";

if  ( debugging )
     alert( "Calls swapImage() with argument :  "  +  whichImage  );       
     var  swapStatus  =  swapImage( whichImage );        

if  ( debugging) 
     alert( "Exits swapImage() with swapStatus :  "  +  swapStatus);     

By examining the content and order of the alert() as they appear, you can as well examine the health of your program very easily.

You can also read our tutorial post on: JavaScript For Loop

Use a JavaScript Debugger 

A debugger is an application that places all aspects of script execution under the control of the Programmer. Debuggers provide full control over the state of the script through an interface that allows you to examine and set values as well as control the flow of execution.

Once a script has been loaded into a debugger, it can be run one line at a time or instructed to halt at certain breakpoint. Once execution is now halted, the programmer can now examine the state of the script and its variables in order to determine if something is missing out from the script. You can also watch variables for the changes in their values.

The latest version of the JavaScript Debugger for both Mozilla and Netscape browsers can be downloaded from the Venkman Development website.

Useful Tips for Developers

Below are the list of tips to be kept in mind to reduce the number of errors in your scripts and simplify the debugging process -

• Use plenty of Comments - Comments enables you to explain why you wrote the script the way you did and to explain particularly the difficult sections of the script.

• Always use Indentation to make your code easy to read. Indenting Statements also makes it easier to match up beginning and ending tags, curly braces, and other HTML and Javascript elements.

• Write Modular Code - Whenever possible, group your code into functions. Function let you group related Statements, and test and reuse portions of the code with little or no effort.

• Be consistent in the way you name your variables and functions. Try using names that are long enough to be meaningful and describe the contents of the variables or the purpose of the function.

• Test long scripts in a modular manner. In other words, do not try to write the entire script before testing any portion of it. Write a piece and get it to work before adding the next portion of the code. 

• Use consistent syntax when naming variables and functions. In other words, keep them all in lowercase or all in uppercase; if you prefer the Camel-Back notation, use it consistently.

• Use descriptive variable and function names, and avoid using single character names.

• Watch your equal signs - You should not use a single = for comparison purpose.

• Declare variables explicitly making use of the var keyword.

• Watch you quotation marks - Remember that quotation marks are used in pairs around strings and both quotation marks must be of the same style ( either single or double quote). 

Alright guys! We have come to the end of this tutorial post. And am advising you to follow the tips listed out above, so whenever you are done with learning and start coding proper, your codes will have less errors and easy to read and understand as well.

If you have any questions to ask in regards with this tutorial, feel free to do that via the comment box below.

Follow us on our various social media platforms available and subscribe to our newsletter to get our tutorial posts delivered directly to your emails. 

Thanks for reading and bye for now.