It’s 2022, don’t use console.log anymore but this
Tags: javascript, programming, beginners, webdev
Published: 2022-09-08 19:42:52

The JavaScript console object has many methods and tricks. Here are five worth knowing about.

**As someone who maintains the front-end, it's important to learn how to use console.log. This method can let you show information on the screen on console when debugging certain issues.**

**But do you know any other secrets about the console object?**

In this article I will summarise 5 tips for using the console object. It's my hope that these are helpful.

## 1️⃣ console.log()
**Basic usage skills**

console.log() is one of the most commonly used methods in JavaScript and can be found nearly anywhere.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v985lefxeb5n1oz9oxbp.png)

But when there's too much information, it becomes hard to know what any of it means!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmuv9u7bu0ofzao6wmql.png)

So, is there any good way to see more clearly what it is?

Yes, we just need wrapping the output in an object.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0t2ji78qajyxv37pq21c.png)

**CSS style**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y80f83sswix2qqtoj491.png)

It's amazing that console.log can also be customized!

## 2️⃣ console.warn()
When the console prints out all of this information, it can be difficult to find what we want. Don’t worry, console.warn can help us because it has a special yellow colour flag.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nt155z3b7jveyqlovusg.png)

## 3️⃣ console.error()
We routinely send HTTP messages to request data and when an error occurs in the request, I like to print an error message via console.log.

But… that’s not a good idea, instead, we should use console.error!

Why? Because it not only has a unique red error flag but also prints the stacked relationship of function calls.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x347evu7ku7o474rnr7w.png)

## 4️⃣ console.time() & console.timeEnd()
And what if you want to know the execution time of a piece of code? Probably you have done something like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22t1xbth54b7tmo8lmnb.png)

But thanks to the console functions, we have a better option:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7um0c4blapjkup8r2na8.png)

And what if you want to count the execution time of multiple pieces of code? No worries, that is something we can also easily do, just like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzrgveczq16oi6g894er.png)

## 5️⃣ console.table()
As we saw previously, we often use console.log (_and the other functions_) to print some information but sometimes that is not intuitive (_just check the following image_):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e927hr8swm9zdrau0q7g.png)

Luckily, we have another function called table():

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oblmn2ai6kdx9yv50wl1.png)

Much better, isn’t it?

## 🌎 Let’s Connect
- Twitter: [@thenaubit](https://twitter.com/thenaubit)