It’s 2023, Please Don’t Just Use “console.log” Anymore 😎
Published: 2022-09-16 05:48:45

It is 2023 and still you use console.log then this guide for you

5 JavaScript console object methods and tricks you should know about.

As a front-end engineer, you must have used console.log, which can help us print auxiliary information on the console to troubleshoot problems.

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

This article will introduce 5 practical tips for using the console object, I hope you will like them

## 1. console.log()

1.1 Basic usage skills

console.log() is the method we use most often in our work, and you can use it anywhere in JavaScript.

`
const name = 'fatfish'
const age = 24

console.log(name, age)
`

But when the amount of printed information becomes very large, the information becomes unintuitive. Because we don’t know what it refers to

```
const name = 'fatfish'
const age = 24
const job = 'Front end development engineer'
const hobbies = 'read, write article'

console.log(name, age, job, hobbies)
```


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

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

Yes, we just need an object.

```
const name = 'fatfish'
const age = 24
const job = 'Front end development engineer'
const hobbies = 'read, write article'

console.log({ name, age, job, hobbies })
```


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

1.2 CSS style


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

It’s so interesting that console.log can also be customized.

```
console.log('%cfatfish', 'color: red;')
```

## 2. console.warn()

When the console prints out a lot of information, it is not easy to find exactly what we want. Don’t worry, console.warn can help us because it has a special yellow colour flag

```
for (let i = 0; i < 50; i++) {
  console.log(`i: ${i}`)
  
  if (i === 16) {
    console.log(`i--: ${i}`)
  }
}
```


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

```
for (let i = 0; i < 50; i++) {
  console.log(`i: ${i}`)
  
  if (i === 16) {
    console.warn(`i--: ${i}`)
  }
}
```


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

## 3. console.error()

In our daily work, we inevitably send HTTP requests to get data, and when an error occurs in the request, I will habitually print an error message via console.log.

But my friend, believe me, that’s not a good idea. Using console.error would be much more sensible.

```
ajax() 
  .then((res) => {
    fn(res)
  }).catch((err) => {
    console.error(err)
  })
```

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

```
const a = () => {
  console.error("error");
}
const b = () => {
  a()
}
const c = () => {
  b()
}

c()
```


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

## 4. console.time() & console.timeEnd()

Friends, how do you generally count the execution time of a piece of code?

```
let startTime = Date.now()
let count = 0

for (let i = 0; i < 1000000000; i++) {
  count++
}

console.log(Date.now() - startTime)
```


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

Maybe you have also gotten the execution time of a piece of code by calculating two-time intervals, but we have a better option, do you want to try it?

```
let count = 0

console.time()
for (let i = 0; i < 1000000000; i++) {
  count++
}
console.timeEnd()
```


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

Wow, this is great, I like this way too much. But that’s not enough, if you want to count the execution time of multiple pieces of code, you need to give it a flag.

```
let count = 0

console.time('time1')

for (let i = 0; i < 1000000000; i++) {
  count++
}

console.timeEnd('time1')

console.time('time2')

for (let i = 0; i < 1000000000; i++) {
  count++
}

console.timeEnd('time2')
```


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

## 5. console.table()

We often use console.log to print some information, but sometimes it's not so intuitive.

```
const foods = [
  {
    name: '🍔',
    price: 30.89,
    group: 1,
  },
  {
    name: '🍨',
    price: 20.71,
    group: 1,
  },
  {
    name: '🍿',
    price: 10.31,
    group: 2,
  },
  {
    name: '🍵',
    price: 5.98,
    group: 2,
  },
]

console.log(foods)
```


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

Let's try console.table .

👏🏻 It looks like a table, simple and clear.


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

**Finally**

Thanks for reading. I am looking forward to your following and reading more high-quality articles.