So being a JavaScript developer whenever I have to debug my code, the first thing that comes to my mind is adding a console.log(). Is this the only way of debugging using a console object? Why all my console data looks similar? What if I can add some colors to my console data? What if I can organize my data correctly?
UGHHH!!!!
JavaScript console methods to the rescue
Apart from the log() method, the console object provides us with some more useful methods which we can use to boost our productivity and take our debugging skills to the next level. So in this article, we’ll briefly understand 7 of the many different JavaScript console methods that remain hidden to most of the developers.
#1 console.table()
You as a developer must have put an array or object inside a console.log() . Well there’s a better way of doing it by using console.table() which will structure your code for better readability. You can also sort your table in any way you like without adding any extra piece of code.
Example
Code
Output
#2 console.assert()
console.assert() comes in handy when you want to print some data on the basis of a certain condition, if the assertion is false then it’ll be printed otherwise nothing will be printed in case it’s true.
Example
Code
Output
#3 console.dir()
The console.dir() displays an interactive list of the properties of the specified JavaScript object. The output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects. This method is very much similar to console.log() but the key difference is visible when we start playing with DOM nodes. console.log() prints the element in an HTML-like tree while console.dir() prints the element in a JSON-like tree.
console.log() gives special treatment to DOM elements, whereas console.dir() does not. This is often useful when trying to see the full representation of the DOM object.
Example
#4 console.count()
Let’s say you want to see how many times a certain part of your code is being run, console.count() can help you out as it prints the number of times a part of your code for example a function runs.
Example
Code
Output
#5 console.time()
To become a better JavaScript developer, one should understand the performance impact of different types of loops. console.time() can help you as it prints the amount of time taken by a particular section of your code to execute.
Example
Code
Output
#6 console.group()
This method is helpful when you want to group your console data which is similar. We can even do nesting and show relationship among them.
Example
Code
Output
#7 console.trace()
Dealing with bugs in a large and complex codebase where you don’t exactly know the root cause of it can quickly become frustrating and time consuming. Understanding the code execution flow can help you quickly deal with those bugs and console.trace() helps you deal with those bugs better.
In simple terms it logs to the console the call stack that exists at the point console.trace() is called.
Example
Code
Output
Further Reading
This isn’t everything. There’s so many other console methods that you can read about and leverage them in your projects and become super productive. If you’ve come to this point then I’d invite you to discover more ways to leverage browser DevTools to their full potential.