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 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")
 
Notion image