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)

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 })

1.2 CSS style

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}`)
  }
}

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

  if (i === 16) {
    console.warn(`i--: ${i}`)
  }
}

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()

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)

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()

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')

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)

Let's try console.table .

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

Finally

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