Console is much more than .log()

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.

console.log()

I'll not be wasting time on this as its the most used one and every web developer use this every now and then.



But yes still few quick tips:

try destructuring like console.log(user); as to get the name of your object while logging as well, rather than just Object.


You can actually use variables in console logs as well. (Keep the order of variables in mind.)
%s for string
%d for decimals


Other than just log() we have multiple console levels which are meant to be used for different purposes and are also filterable,

console.clear()

You can avoid using mouse to click the

console.table()

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()

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()

.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()

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()

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()

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)

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.