Shortcuts to open the console in browsers
Ctrl + Shift + I (windows)
Command + Option + K (Mac)
In this post, I've curated 10 console methods that you can use to improve your debugging skills
This method works just like the console.log() method.
It Useful in testing of code. By default the error message will be highlighted with red color
// console.error() method
console.log("This is an error");
✨ console.dir() method
This is another method that is also almost like *console.log() * except it shows the content in JSON format
// console.dir() method
Output showing difference between console.log() and console.dir()
Output for the .dir() method
✨ console.table() method
This method is used to generate a table inside a console. The input must be an array or an object which will be shown as a table.
It is really a handy method to use if you are fetching data from an API. You can visually see how data is received
Output for the .table() method
✨ console.group() & console.groupEnd()
group() and groupEnd() methods of the console object allows us to group contents in a separate block and indented.
➩ .group() is used to begin a new group, it accepts a label as well as the group name.
by default, the group is opened on the console. use .groupCollapsed to close the group be default
➩ .groupEnd() closes off the current group, It takes same label as the .group()
Output for the .group() method
✨ console.time() & console.timeEnd()
These methods are used to determine the amount of time used for a block of code to execute.
Just like the .group() method, this also takes a label which must be same.
Output for the .time() method
.....this method as the name is, its used to clear the console.😅
Output for the .clear() method
You know other methods of the console object which is really useful in debugging, tell us in the comment section👇😊
Follow me for more dev tips🚀