The console is a JavaScript object that grants developers access to a browsers debugging console.
Shortcuts to open the console in browsers
- Ctrl + Shift + I (windows)
- Command + Option + K (Mac)
In this post, I've curated 5 console methods that you can use to improve your debugging skills
✨ console.error()
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");
Output
✨ 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 receivedOutput
✨ 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
✨ 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
✨🚀 console.clear()
.....this method as the name is, its used to clear the console.😅
You can support me to keep writing more for you😊❤
You can also apply css styling to certain messages in the console, if you need something to stand out. Use
console.log("%cTEXT", "color: purple; font-size: 20px")