Console is is a favourite feature for many web developers. If you have been using it, you know there are lots of tricks. Here are some that I like to share.
First a disclaimer :
I did not discover this knowledge by myself. I read them from several sites/ sources. This article collect the data from several sources , and while I was learning and rediscovering from what I have already known, I decided to compile them and re-share them according to my understanding.
If you enter console in your browser, you will see this (below):
As you can see in the image, console has lots to offer beside a mere console.log. I am going to introduce some of the functionalities that may be useful to you.
Basic console.log ()
This will output the fruits variable in the basic console.log
Styling
We can style the console in various ways. Examples
or even combine the styles
This is the list of CSS format specifiers that we can change in the console
console.dir ()
You can even dir the Documents. It will return as an object
console.count()
console.count will do the incremental for us instead of counting manually. This is convenient
console.table()
console.table() will print a visual table representation of an object with rows for each of the object properties
console.assert()
console.assert() will help us to decide if the condition passed or failed. In the above line, there is no “grapes” in the object fruits, hence console assert as failed
console.trace()
From the above code, trace helps to print the stack trace of the code. Call the function and you will see the exact trace message that the code was called in.
console.time / console.timeLog / console.timeEnd
console.time() start a timer. console.timeLog() print the time since the timer has started. Lastly console.timeEnd() print the total amount of time.
console.group() / console.groupEnd() / console.groupCollapsed()
This is useful to group message that will arrange in a group rather than in a mess. When you use console.groupCollapsed(), the group will collapse by default
