5 JavaScript Console Methods That will Improve your Debugging Skills🚀

August 8, 2022


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");
Enter fullscreen modeExit fullscreen mode

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);
Enter fullscreen modeExit fullscreen mode

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🚀



Source link

Comments 0

Leave a Reply

Your email address will not be published. Required fields are marked *