All posts

7 different JavaScript console methods you never knew existed 🤯

Tue Jun 14 2022

5 min read


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

console.table code

Output console.table 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

console.assert code

Output

console.assert 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

console.dir code and output

#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

console.count code

Output

console.count 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

console.time code

Output

console.time 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

console.group code

Output

console.group 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

console.trace code

Output

console.trace 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.