DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for 5 JavaScript Console Methods That will Improve your Debugging SkillsπŸš€
Waleedh Nihal Ahmed
Waleedh Nihal Ahmed

Posted on

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.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()
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
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
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
Output for the .time() method

βœ¨πŸš€ console.clear()
.....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πŸš€

Top comments (0)

🌚 Life is too short to browse without dark mode