Console is much more than .log() 
Tags: javascript, beginners, webdev, console
Published: 2020-08-31 20:50:03

Hi! I know all of you must have used console for logs and probably here to check out, if there anything to add to, other than that as well. Console is a browser API which can be explored in detail [here](https://developers.google.com/web/tools/chrome-devtools/console). 


## console.log() 
![console log](https://dev-to-uploads.s3.amazonaws.com/i/o8859np3k7v8zc1fyk96.JPG)
I'll not be wasting time on this as its the most used one and every web developer use this every now and then.  
<br/>
But yes still few **quick tips**:
![enter image description here](https://dev-to-uploads.s3.amazonaws.com/i/0pg4s7c1byn5875ewzwi.JPG)
try  destructuring like `console.log(user);`  as to get the name of your object while logging as well, rather than just *Object*. <br/>
![enter image description here](https://dev-to-uploads.s3.amazonaws.com/i/bcd2ktr6g8cxxo93pj1j.JPG)
You can actually use variables in console logs as well. (Keep the order of variables in mind.)
%s for string
%d for decimals<br/>
![enter image description here](https://dev-to-uploads.s3.amazonaws.com/i/1hyld45hmejnoa79tssa.JPG)
Other than just log() we have multiple console levels which are meant to be used for different purposes and are also filterable,
<br/>


## console.clear()
 You can avoid using mouse to click the![console clear](https://dev-to-uploads.s3.amazonaws.com/i/j3d4aoy03pt8982gva68.JPG)

## console.table()
![enter image description here](https://dev-to-uploads.s3.amazonaws.com/i/sjc9hx7vtgn5pdx6bi2y.JPG)
This again might be another one widely known and used but still it makes sense to add it to the list. So you can log your object/Array with a `console.table()`. Only specific values from the variable can also be logged using an optional second argument, as shown in the example above.

## console.assert()
![enter image description here](https://dev-to-uploads.s3.amazonaws.com/i/mho0848nw13kblhe2d9z.JPG)
Are you a developer who loves to do test driven development (TDD). Then you might like this one. Its mostly used to check conditions and asserts you with a message whenever it fails. 

## console.count() & console.countReset()
![enter image description here](https://dev-to-uploads.s3.amazonaws.com/i/higzfr0nx1bnxmqcneaj.JPG)
.count() and .countReset() are just what you get from the name. Every time console.count() is called it increases the values and countReset() makes it to zero. You can have multiple counters by providing the counter name inside the parenthesis like this `console.count('my var')` and if not given is considered as *default*.

## console .time() , .timeLog() & .timeEnd()
![enter image description here](https://dev-to-uploads.s3.amazonaws.com/i/hlal0gxakiza0q1ezyxt.JPG)
Sometimes the writing loops inside loops make you realize, that this function is pretty complex and it might take a lot of time in computing it. But how much ?
Just add a `console.time()` to the start and `console.timeEnd()` to the end of the function. And if you wanna track time in between as well add `console.timeLog()` . Just like counts names can be added to timer, unnamed being named as *default*.


## console .group(), .groupEnd() & groupCollapsed()
![enter image description here](https://dev-to-uploads.s3.amazonaws.com/i/r2yfb20w75i2q5dw7ei4.JPG)Its pretty often that we have console.log() statements inside a loop. Which seems to be most appropriate place to use console groups. As its pretty difficult to segregate the logs between multiple iterations. 

You can do this by starting a `console.group()` at the start and `console.groupEnd()` at the end. (Please note .group() can be initialized with a name as a param but groupEnd() doesnt need it)

You often wouldn't want to get bombarded with a lot of groups filling up your console. So you can use `groupCollapsed()` working same as group, just collapsed.

## console.trace()
![enter image description here](https://dev-to-uploads.s3.amazonaws.com/i/k5cr05f6o6t7s1p0srzu.JPG)
In order to get to know where the calling came up from, we can use `console.trace()` to log the stack trace.


## Bonus !! (CSS Styles)
![enter image description here](https://dev-to-uploads.s3.amazonaws.com/i/z9xw5st2h5da49nnbxnk.JPG)
Rather than just using boring consoles we can actually make it colorful by providing CSS Styles to it.
So we can add a *%c* to be replaced with the style mentioned in the next argument, to be applied on this one. 


Thats all folks.
![enter image description here](https://dev-to-uploads.s3.amazonaws.com/i/7ryl7v77es1q1w3b3gkd.JPG)