5 JavaScript Console Methods That will Improve your Debugging Skills🚀

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 10 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 received
Output

✨ 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 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🚀