Improve your Javascript debugging Skills

Debugging a code is an art. If you don't have good debugging skills, it can really be pain in the ass. If you don't understand the working mechanism of Javascript code, finding a bug can be hard. Having knowledge of debugging tools/methods that JS provides, it can be really helpful . Besides, having good knowledge of debugging can save a lot of time. Following are some of the methods / statement in JS that aids debugging .

1. console.log
2. console.table
3. console.trace
4. console.warn
5. console.error
6. console.assert
7. debugger
8. console.time && console.timeEnd

Let's get into these in detail

console.log

This method takes any number of arguments and prints the value in console window. It is helpful when you want to know the value of variable at specific instant of time.

Usage:

let student ={
 firstName: "Niroj",
 lastName: "Dahal"
}
console.log('student detail',student);

Result Screenshot

console.table

This method is useful when you want to see the values of array in console. It shows the data in table format so that the datas are readable

Usage:

let values = [1,2,3,4,5,6];

console.table(values);     

Result Screenshot

console.trace

This methods prints out the stack trace of code. It is useful when same method is called from multiple places and we are having hard time figuring out why and from where the specified method is called.

Usage:

function CalledMethod(){
    console.trace('trace from where this method is called');
}

function CallerMethod1(){
   CalledMethod();
}

function CallerMethod2(){
   CalledMethod();
}
CallerMethod1();
CallerMethod2();    

Result Screenshot

In the above example, we called CalledMethod twice once through CallerMethod1 method and again through CallerMethod2 . As seen in screenshot, trace is written in console stating the same.

console.warn

This method shown message in yellow color (warning) .

Usage:

console.warn('This is a warning message');    

Result Screenshot

console.error

This method shows message in red color (error).

Usage:

console.error('This is an error message');    

Result Screenshot

console.assert

This method writes a message to the console if an expression evaluates to false. It is useful to log against unexpected/invalid conditions

Usage:

let studentDataFromApi=null;
console.assert(studentDataFromApi !=null,'Student data cannot be null');    

Result Screenshot

In this example, since first expression

studentDataFromApi !=null

evaluates to false, second parameter message is logged.

debugger

This method is used to set breakpoint during the program flow. If you want to see the values of variables at some point of time, consider using a debugger. The debugger statement stops the execution of JavaScript, and calls the debugger

Usage:

function TestDebugger(){
   let val =1,secondVal=2,thirdVal=3,forthVal=4;
    debugger;
}
TestDebugger();    

Result Screenshot

In screenshot , we can clearly see the value of variables of state before debugger is called.

console.time && console.timeEnd

These methods are used to print the execution time of the code .

console.time starts the timer and console.timeEnd stops previous timer and logs the time taken to execute code between those methods. Both methods take a string parameter for named timer. You can specify name to timer in console.time method and specify same parameter to stop a timer. If parameter is not provided, name defaults to default

Usage:

console.time('start');
console.timeEnd('start');    

Result Screenshot

Thank you for reading and happy debugging!