As a programmer working with JavaScript, you’ve probably used console.log() to debug code. It is absolutely correct, there is nothing to argue with. But as you may not know, apart from the log() , the console object is also quite useful. And in this article, I will introduce to you some of these useful methods.
Several methods in the console object.
The console object in JavaScript provides access to the browser debugging console – where you can print out the values of the variables that you used in code. Typically, this can be used to debug your code.
1. console.log ()
This method is used to print the value of the variable passed to the Console. Any type of data can be used in log (), be it string, object, array … etc
For example:
2. console.error ()
This method is used in code testing. It is used to log errors in Browser Console. By default, the error message will be highlighted in red.
For example:
3. console.warn ()
Just like the error () method, this method is also used to test code. Usually, it helps to issue alerts to the Console. By default, the warning messages are highlighted in yellow.
For example:
4. console.clear ()
The method used to delete the Console. It is often used if the Console is clogged with messages / errors. Console will be cleared, and the Console was cleared message displayed.
For example:
5. console.time () and console.timeEnd ()
These two methods are used in conjunction with each other. Whenever you want to know the amount of time spent on a block or function, you can use the time () and timeEnd () methods.
Both methods take a string as an argument. Make sure you use the same string for both of these two methods.
For example:
6. console.table ()
This method creates a table in Console, for easier readability. A table is automatically created for an array or an object.
For example:
7. console.count ()
This method is used to count the number that the function typed in this counting method. This can be used inside a loop to check how many times a particular value has been executed.
For example:
8. console.group () and console.groupEnd ()
These two methods allow us to group content inside a separate block, which will be indented. Like the two methods time () and timeEnd (), these two methods also take the same string as an argument. You can expand or collapse groups.
For example:
Bonus: Styling your logs
You can style the Console log to make it cooler. It’s very easy, you just need to add the CSS style as a second argument to the log () method, while starting the first parameter with% c. The CSS style will replace% c in the Console.
For example:
Conclude
The console object is very useful for the programmer to be able to debug code. We as developers usually only use the log () function. Start making full use of the console object’s capabilities for easier debugging and viewing browser logs vividly. I hope this article was helpful.
Thank you for reading!