Console API - Debugging Like A PRO - Javascript
Tags: javascript
Published: 2021-07-06 16:15:01

*Console API of Javascript scripts provide a lot more than just `console.log`. Here are some of my observations & learning on the **Console API**. Also, a few tips that I use for logging are added at the end - Feel free to stick till the end.*

### 1. console.log & similar ones
This is what is used by most developers to print something in the developer console. But there are a few more console methods that could improve our development experience. Some of them are below,
- debug => same as log, but has a log level of `debug`.
- error => same as log, but has a log level of `error` & add red background to the message.
- info => same as log, but has a log level of `info`.
- warn => same as log, but has a log level of `warn` & adds blue background to the message.

**Syntax: **`console.log(obj1 [, obj2, ..., objN]); console.log(msg [, subst1, ..., substN]);`

![console-logs-and-variations.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625420638227/_PJyAxi4R.png)

### 2. console.count
Ever confused about how many times the recursive call or a loop is executed?  `count` method of the Console API covers this. 

**Syntax: **`console.count('label')`

![console.count.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625579935566/vbn6zVxoh.png)

### 3. console.group
When the group method of Console API is called, the subsequent logs are printed in a group. Also, we can use a group inside a group to create an inner loop. The groups are ended when the `console.groupEnd()` is called. Additionally, if you want your groups to be collapsed, you can use `console.groupCollapsed()` instead of `console.group()`.

This could be super useful when you have a log statement in a function and you can surround the function caller with group and group end to differentiate the results.

**Syntax: ** `console.group([label]);console.groupCollapsed([label]);console.groupEnd([label]);`


![console.group (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625585540041/FUFZIn229.png)


### 4. console.dir & console.table
`console.dir` & `console.table` are used for clear representations of object properties and array element properties more clearly.
**Syntax: ** `console.dir(Object);` `console.log(Array<Object>);`

![console.dir.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625586196721/YwOQ3ADcR.png)

![Untitled design (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625586201772/_fqws7ITt.png)


### 5. console.time
`console.time` is used to register a timer to track in the global level and whenever we need a time elapsed during the execution, we can call `console.timeLog()`. Also to end a timer, we can call `console.timeEnd`. We can run multiple timers by passing a label param to the `console.time([label])` method.

**Syntax: ** `console.time(label);` `console.timeLog(label);` `console.timeEnd(label);`


![console.time.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625586794289/vlOKFEeNI.png)


### Smart Logging
I usually have the habit of appending the name of the variable while logging the value to the console. The following helped a lot of time during various debug sessions. Hope you find this useful.

![tip.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625587266089/3bUAlDAzk.png)

Hope you find this useful. If there are any tip and trick for logging, please add in the comments. Let me know if it could be improved in the comments and feel free to follow on Twitter -  [radnerus93](https://twitter.com/radnerus93)