DEV Community

loading...
Cover image for ✒️ Some 🔥 tips on using the JS console (console.log & console.table)

✒️ Some 🔥 tips on using the JS console (console.log & console.table)

Benjamin Mock
I'm Ben, a Frontend Developer from Germany working at ebay
Originally published at codesnacks.net ・Updated on ・2 min read

You've probably all seen the "Don't console.log, use the debugger!" posts. There is truth in them of course, but in reality, console.log is super useful and a quick and simple debug method. So let's learn some helpful, useful and maybe even unexpected use cases of the console.

Using console.log to print values on the console is pretty clear. Let's for example print the current date:

const now = new Date()
console.log(now)

If you do this with multiple different values, it can become confusing pretty quickly. To keep things tidy, we can also pass multiple arguments. This makes it possible to tag outputs:

const now = new Date()
const tomorrow = new Date()
tomorrow.setDate(tomorrow.getDate() + 1)

console.log("now", now)
console.log("tomorrow", tomorrow)

We could of course also log both values with just one console.log call:

console.log(now, tomorrow)

Or we could make use of the object property value shorthand and the way console.log handles objects. So instead of just logging our variable, we'll log an object, that we create on the fly:

console.log({ now })
console.log({ tomorrow })

This logs something like

{now: Sat Jan 11 2020 10:11:29 GMT+0100}
{tomorrow: Sun Jan 12 2020 10:11:29 GMT+0100}

Cool! So our variables are automatically tagged this way!

As we're speaking about logging objects - there's another great way to log these using console.table.

const luke = {
  "name": "Luke Skywalker",
  "height": "172",
  "mass": "77",
  "hair_color": "blond",
  "skin_color": "fair",
  "eye_color": "blue",
  "birth_year": "19BBY",
  "gender": "male"
}

console.table(luke);

This will log a neat table view of the object.

console.table for an object

The same also works perfectly well for arrays and arrays of objects:

// let's have some objects (from the swapi.co)
const falcon = {
  "name": "Millennium Falcon",
  "model": "YT-1300 light freighter"
}

const starDestroyer = {
  "name": "Star Destroyer",
  "model": "Imperial I-class Star Destroyer"
}

const deathStar = {
  "name": "Death Star",
  "model": "DS-1 Orbital Battle Station"
}

// create an array of our objects
const starships = [falcon, starDestroyer, deathStar]

// and log them on the console in a neat table
console.table(starships)

The output will look something like this:

console.table for arrays


Want to get better at Web Development?
🚀🚀🚀subscribe to my weekly ✉️newsletter

Discussion (11)

Collapse
thompcd profile image
Corey Thompson

Thank you! I always used console.log("waste my time", wasteMyTime), didn't know about console.log({wasteMyTime})!

Collapse
benjaminmock profile image
Benjamin Mock Author

lol ... glad I could help to find another way to waste your time :D

Collapse
sonyarianto profile image
Sony AK

wow this is great, always learn something new everyday.

Collapse
benjaminmock profile image
Benjamin Mock Author

Thank you for the nice comment! That's motivating to create more of these short tutorials!

Collapse
sonyarianto profile image
Sony AK

yes, i like something like this, practical

Collapse
adnanbabakan profile image
Adnan Babakan (he/him) • Edited

Holy programming.
console.table
MAN!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Collapse
shahrozahmd profile image
Shahroz Ahmed

It makes me look pro in front of my friends while debugging the code😍

Collapse
waylonwalker profile image
Waylon Walker

The object property value shorthand is genius. Will definitely be using that from now on!

Collapse
benjaminmock profile image
Benjamin Mock Author

Awesome! Great to hear, that you good some value out of the post!

Collapse
jayrald07 profile image
Jayrald Empino

Wow! That's great! That would really change how I deal with my errors 😅