Improve your Javascript debugging Skills
Tags: debugging, javascript, webdev, tutorial
Published: 2023-03-03 15:44:58


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**
![Result of above code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr4luxr23v0rwr8zuh66.png)


## 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**
![Result of above code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0miwi84ikzstysejfxc.png)



## 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**

![Result of Above Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8uwq6ez12cg1g5h9zcm.png)

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**

![Result of above code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48b6019vufdg6lcge0ia.png)


## console.error

This method shows message in red color (error).

**Usage:**

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

**Result Screenshot**

![Result of above code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3385i6oueyt1prqzeopl.png)


## 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**

![Result of above code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ostapur05i5ugusejgkq.png)

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**

![Result of above code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fnz8a04amylspyahphw.png)


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**

![Result of above code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nb58n8pixh5aj8ji3ogp.png)


Thank you for reading and happy debugging!