DEV Community

Stop using default console.log, check this instead

Guilherme Toti on May 21, 2020

So, you are always using console.log to debug your application, right? In this post, I will show you alternatives to better debugging. Int...

Read full post

Guilherme Toti • May 22 '20

Thanks man!
The % operator is like a placeholder.
Let’s say you have:

console.log(“my %s”, “string”)
> “my string”

In this case, the second argument (“string”) will be replaced at %s.

There is also a %f for float numbers, and it’s cool because you can do something like:

console.log(“my %.2f”, 12.3456789)
> 12.34

Guilherme Toti • Jun 29 '20

You can do it the same way! You can use ... assignment and array of values in a console.log!

Just like:

const myArr = [1,2,3]
console.log(...myArr)
console.log(myArra)

Both should work perfectly!

Ruben Sanchez • May 22 '20

In the first example, my preferred method is normally the template string. I have trouble seeing the advantage of the % operator compared to concatenating the variables. Other than that, this article was useful and discovered me the dir and group methods!

Guilherme Toti • May 22 '20

Yeah, I do not see a lot of advantages using % operator either, but I bring it just as informative content, it's a "good to know" thing...
Thanks! yesss, dir an group can be very helpful!

Willy Schott • May 22 '20

The % syntax is for seasoned programmers who started with C and are now bald and wrinkly. printf still ringing a bell? 👩🏼‍🦲

Guilherme Toti • May 22 '20

ahahaha

Record • May 22 '20

Great, thank you for this!

In your first example I think it is supposed to read
console.log('Hello ' + a);

Guilherme Toti • May 22 '20

Thank you!
Yes! You're right! That was my mistake! Just fixed it, thanks!!!

Saloni Yadav • May 22 '20

Mind blowing. Thank you for this article. Pity I always did console.log to dissect my objects and arrays. I think i going to overuse console.table now. :)

Guilherme Toti • May 22 '20

You’re welcome!
It is really mind blowing! I have been using .log for years! Now I can debug stuff way faster!

Maciej Cieslik • May 21 '20

Thanks for the article, console.trace() can be usefull sometimes.

Guilherme Toti • May 21 '20

Thanks!
True! I completely forgot about console.trace(), thanks for remind me!

Saloni Yadav • May 22 '20

What does trace do?

Guilherme Toti • May 22 '20

Trace will show the stack trace, where that fails.
Let’s say in your app you have like a function that calls another function, that calls another function.
If you add a trace in the last function and something happen, it will log exactly where happened, like:

function_3 at line 1 (example)
function_2 at line 5 (example)
function_1 at line 88 (example)

Namstel • May 22 '20

Oo! I like that one a lot. :)

Djordje Radakovic • May 22 '20

First example can also be written as console.log('Hello', a)

Randal Vance Cunanan • May 23 '20

I few ones I didn't know like console.dir. Thanks for this!

Guilherme Toti • May 23 '20

You're welcome!

Kevin Sidwar • May 22 '20

Sorry for the dumb question but do you need a certain console for this to work? I tried both the CSS and grouping things after updating to the latest version of node and neither works. What am I missing? I'm on a Mac using the Terminal app.

Guilherme Toti • May 22 '20

Oh, I’m not sure how it works on node, if node has some limitations, but, my examples were all done by any web browser console (developer tools)

Kevin Sidwar • May 22 '20

Oooooooooh! Haha. I totally assumed the node terminal. That makes a LOT more sense now. Thanks for the fast reply.

Guilherme Toti • May 22 '20

ahahaha! you're welcome!

Pranjal Verma • May 22 '20

Hey guys, I have been working on my very first APIs project and in that project I'm making a "QUIZ APP", where from an API. I have been taking 10 question and giving them multiple choices and at end they will be getting scored. I'm using NODE.JS, EXPRESS, REQUEST, EJS for the app.

The problem comes here when i get a string from API. I change it to an object using JSON.parse() and sending it to EJS files and then displayed. but when their are symbols in question like ", ' , and more they are displayed as &139; , " like that.

                      HOW DO I FIX THAT.

Brad Dougherty • Jun 9 '20

These days, I use this a lot: console.log({ a, b });

Guilherme Toti • Jun 12 '20

That's awesome and very useful! I'm using that a lot though!

Yair Even Or • Jun 1 '20

I've authored a tiny utility to easier styled console logs:

github.com/yairEO/console-colors

Guilherme Toti • Jun 1 '20

That’s cool!!

Emanuele Mignano • Nov 5 '20

Great and usefull article!! thanks!!
console.table open my eyes!!
i will use it when i receive json response and i need to view results.

Rob Kendal {{☕}} • May 21 '20

Super useful, thanks for this Guilherme!

Guilherme Toti • May 21 '20

You're very welcome! I'll probably bring more useful things here soon!

Darryl Young • May 22 '20

Thanks for sharing, Guilherme.

Guilherme Toti • May 22 '20

You’re welcome!

Juan Manuel Vallejo • May 28 '20

Useful info! Thanks :)

Guilherme Toti • May 28 '20

You're welcome man!

Rafael R. Ferreira 🕹️🐕 • May 22 '20

awesome tips!

Guilherme Toti • May 22 '20

Thanks man!

Anand Prem • May 23 '20 • Edited

console.time also worth to mention!
Apart from that nice and concise article

Guilherme Toti • May 23 '20

That's true! console.time also worth the search! Good mention

NIku Nitin • May 21 '20

Thanks for the article.. Its really awesome..
I never knew console had these many methods.

Guilherme Toti • May 22 '20

You’re very welcome!
Yep, console has so many things that can help us, developers!

Julian Martinez • May 22 '20

I never knew about console.table. Thanks for the great article!

Guilherme Toti • May 22 '20

You're welcome man! Yep, some console mysteries were revealed 👀

sarahb831 • May 23 '20

This was great, thank you! So nice to have options to console.log(), this will make it much easier to debug!!!

Guilherme Toti • May 23 '20

You're welcome!

Rahul Jain • May 24 '20

Loved it! Very informative