Advanced Javascript Console Tips to become Pro Debugger with Bonus

0

If you are Javascript developer then you would aware of console.log() and use many time. But are you aware with other amazing and advanced javascript console methods? If answer is no then this article is for you. At the end of this article, you would be pro debugger and impress your friends with your debugging skill.

Bonus tips is waiting at the end of this article. So stay with us.

Why Is javascript console Object Used?

The console object in JavaScript provides access to the browser debugging console, where you can print values of the variables which you’ve used in your code. Oftentimes, this can be used to debug if the right value is being passed in your code.

I’m pretty sure most of us developers have used console.log() to print values in our browser console. log is just one method of the console object. There are several other methods that are very useful.

 

Let’s start with this method first.

1. console.log()

This method is mainly used to print the value passed to it to the console. Any type can be used inside the log(), be it a string, array, object, boolean etc.

Example:

Output:

Javascript Console log() method
Javascript Console log() method

This method is useful while testing code. It is used to log errors to the browser console. By default, the error message will be highlighted with red color.

Output:

Javascript Console error() method
Javascript Console error() method

This method is also used to test code. Usually, it helps in throwing warnings to the console. By default, the warning message will be highlighted with yellow color.

Output:

Javascript Console warn() method
Javascript Console warn() method

This method is used to clear the console. It is often used if the console is clogged with messages/errors. The console will be cleared and a message Console was cleared will be printed in the console.

Output:

Javascript Console clear() method
Javascript Console clear() method

Both these methods are used in conjunction with each other. Whenever we want to know the amount of time spent by a block or a function, we can make use of the time() and timeEnd() methods. Both these functions take a string as a parameter. Make sure you use the same string for both these functions to measure the time.

Output:

Javascript Console time() method
Javascript Console time() method

This method generates a table inside a console, for better readability. A table will be automatically generated for an array or an object.

Output:

Javascript Console table() method
Javascript Console table() method

This method is used to count the number that the function hit by this counting method. This can be used inside a loop to check how many times a particular value has been executed.

Output:

Javascript Console count() method
Javascript Console count() method

These methods group() and groupEnd() allows us to group contents in a separate block, which will be indented. Just like the time() and the timeEnd() they also accept a label, of the same value. You can expand and collapse the group.

Output:

Javascript Console group() method
Javascript Console group() method

9. console.trace()

The console.trace() method displays a trace that show how the code ended up at a certain point.

Tip: When testing console methods, be sure to have the console view visible (press F12 to view the console).

Output:

Javascript Console trace() method
Javascript Console trace() method

You can also add Styling to the console logs in order to make logs look fancy. It is very simple. You just need to add CSS styling as a second parameter to the log() function, while starting the first parameter with %c. The styles will replace the %c in the logs.

Output:

Javascript Console  method for styling
Javascript Console method for styling

Conclusion

The console object is very much useful for the developers to debug the code. We as developers often use only the log function. Let’s start using the console object to its fullest potential so that it’s easier to debug and to view the browser logs vividly. I hope this article was helpful.

Thank you for reading!

0