DEV Community

Cover image for It’s 2023, Please Don’t Just Use “console.log” Anymore 😎
Ashish donga
Ashish donga

Posted on

It’s 2023, Please Don’t Just Use “console.log” Anymore 😎

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)
Enter fullscreen mode Exit fullscreen mode

Image description

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 })
Enter fullscreen mode Exit fullscreen mode

Image description

1.2 CSS style

Image description

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

console.log('%cfatfish', 'color: red;')
Enter fullscreen mode Exit fullscreen mode

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}`)
  }
}
Enter fullscreen mode Exit fullscreen mode

Image description

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

  if (i === 16) {
    console.warn(`i--: ${i}`)
  }
}
Enter fullscreen mode Exit fullscreen mode

Image description

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)
  })
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

Image description

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)
Enter fullscreen mode Exit fullscreen mode

Image description

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()
Enter fullscreen mode Exit fullscreen mode

Image description

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')
Enter fullscreen mode Exit fullscreen mode

Image description

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)
Enter fullscreen mode Exit fullscreen mode

Image description

Let's try console.table .

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

Image description

Finally

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

Top comments (3)

Collapse
 
decker67 profile image
decker

Its simply clickbait and a copy from him from medium where he seems to be a girl to get some boys to read or he has stolen this from there. What do you prefer?

javascript.plainenglish.io/its-202...

Collapse
 
fredericdasilva profile image
fredericdasilva

I didn't know such features with console! Thanks for the post!

Collapse
 
robbit profile image
Robbit

This is a really useful post, I didn't even realize half of these existed
Like + Save