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 console.log(document.body);
Output showing difference between console.log() and console.dir()
✨ 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
✨ 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()
✨ 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.
…..this method as the name is, its used to clear the console.😅
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🚀