DEV Community

Like `console.log` But Better

Leira Sánchez on February 26, 2020

Who hasn't peppered their code with console.logs in an attempt to find that pesky bug? The logs can get daunting and confusing. These will help you...

Read full post

Tyler Smith • Feb 27 '20

Great article, I had never heard on console.assert!

One of the things that I starting doing as a short hand for writing labels is wrapping the variables in an object literal. It saves on the repetitive typing!

const firstName = 'Leira';
const lastName = 'Sánchez';
console.log({firstName, lastName}); // {firstName: "Leira", lastName: "Sánchez"}

Leira Sánchez • Feb 27 '20

Wow! This great! I will definitely be using this from now on. Thank you 🙂

Vasily Belolapotkov • Mar 6 '20

I like that trick too! And now with console.table you can make it look even better!

Ben Halpern • Feb 26 '20

I like these things because they're just about as simple as console.log but more useful in a lot of cases.

I have a hard time adopting debugging tools any more complicated than print statements.

Great post!

Cathy Casey-Richards • Feb 27 '20

Totally agree! Very simple tips that can be used right away.

Dave Blythe (he/him) • Mar 3 '20

Thanks, Ben.... so much feels here!
It feels so good when someone else acknowledges things like this, really:

"I have a hard time adopting debugging tools any more complicated than print statements"

This 'validates' for those of us who still fumble around semi-blindly with the classic duo of console.log() and alert(stuff) :D

Dionny Prensa • Mar 2 '20

It is also possible to use console.log with JSON.stringify (some Object, null, 2)

Bernard Baker • Mar 2 '20

A good use case for JSON.stringify is that in some cases console.log does not print the true value of its arguments.

So wrapping the argument in JSON.stringify prints the actual value.

James Skinner • Mar 27 '20

It does print the true value, if you log a variable and then reassign it later the console log will show the original value. However properties of that variable may have changed since the log statement was made and the console only evaluates properties when you expand an object in the console, so you get the current values instead of those at the time you called console.log.

If you're interested in shallow properties you can just log { ...obj } instead of obj, or if you want the entire tree of properties you can use something like Lodash's cloneDeep to get a copy of the object and all nested properties.

npmjs.com/package/lodash.clonedeep

Bernard Baker • Mar 27 '20

Could you run this code in a web debugger?

var myVar = {a: true};
var myVar2 = {};
myVar2.b = myVar; // {b: {a: true})
myVar.a = false;
console.log(myVar2); // === {b: {a:false}}

What output do you get?

James Skinner • Mar 27 '20

{b: {a:false}}, which is as expected.

Bernard Baker • Mar 27 '20

Must have been the wrong example.

James Thomson • Feb 27 '20

Don't forget about console.dir! 🙂

Navin • Feb 27 '20

I often use console.dir to see the DOM attributes of an element

Julian Finkler • Feb 28 '20

let firstName = "John";
let lastName = "Doe";
console.log('First Name: %s, Last Name: %s', firstName, lastName);
// First Name: John, Last Name: Doe

Danny Michaelis • Feb 29 '20

Great post, Leira! I love seeing more people use styles in their logging. I'd like to add one more to your list, console.tap. It's one of my own creation, made to solve the fact that console.log returns undefined. Instead tap returns the first value you passed in. Imagine trying to log the result of the filter:

['1', '2', 'zero' , 3, 4, 5]
    .map(parseNumbers)
    .filter(removeEvens)
    .reduce(( acc, v ) => Math.max(acc, v))

Bashu Naimi-Roy • Mar 3 '20

This is fascinating and addresses a frequently encountered awkwardness of console.log, thank you! I'm going to start using this a lot

Leira Sánchez • Mar 1 '20

I will definitely check it out. Thank you!

Samuele Zanca • Mar 10 '20

You forgot the most important console method:

console.group("group name");
console.log("something");
console.groupEnd();

Which creates a collapsible tree for hiding and showing more or less information.

Also console.time and console.timeEnd to track how long something took.

Leira Sánchez • Mar 10 '20

I’m going to have to start using groups. They will definitely make my console cleaner! Thank you

Yaroslav Kosovych • Mar 3 '20

Dont forget about console.time() and console.timeEnd() for performance tracking. console.trace to log track trace and many others cool features :)

Marko A • Mar 5 '20

console.trace was just the one I wanted to mention. Whenever I jut want to trace call stack to just see the flow of function calls better.

José Eduardo Rodrigues Pinto • Mar 6 '20

CSS in console.log

console.log('%cHello World!', 'font-weight: bold; font-size: 50px; color: red; text-shadow: 3px 3px 0 rgb(217,31,38), 6px 6px 0 rgb(226, 91,14), 9px 9px 0 rgb(245,221,8), 12px 12px 0 rgb(5,148,68), 15px 15px 0 rgb(2,135,206), 18px 18px 0 rgb(4,77,145), 21px 21px 0 rgb(42,21,113)');('%cHello World!', 'font-weight: bold; font-size: 50px; color: red; text-shadow: 3px 3px 0 rgb(217,31,38), 6px 6px 0 rgb(226, 91,14), 9px 9px 0 rgb(245,221,8), 12px 12px 0 rgb(5,148,68), 15px 15px 0 rgb(2,135,206), 18px 18px 0 rgb(4,77,145), 21px 21px 0 rgb(42,21,113)');

Pavan Maheshwari • Feb 27 '20

Console.group and console.groupEnd is also very useful.

James Skinner • Mar 27 '20 • Edited

You can use more than one %c in a console string, and use '' to reset styles e.g.

console.log('%cvalue%c = %s', 'font-weight: bold; color: red;', '', str)

If you want some very fancy output you can use this package, which supports multi-line styled output including inline objects and HTML elements:

github.com/astoilkov/console.message

You can even use the CSS trick to display images in the console!

github.com/adriancooney/console.image

Fernando Garcia • Feb 27 '20

I had no idea, now I won’t forget! Thanks for sharing!

Rich • Feb 28 '20 • Edited

Just be aware of support though. We found that console.dir for example wasn't supported by a couple of browsers a year or so back and had to write polyfills! Only an issue if you are baking them into the app (i.e. error handling methods) rather than debugging in devtools

Oddly console.dir is supposedly widely supported even in ie9, but we found this wasn't always the case...

Navin • Feb 27 '20

Checkout the Colored Console log extension for VSCode.

marketplace.visualstudio.com/items...

You can have Flair on all console.log with just a keypress. Also, you can change the styling directly in the extension.

Leira Sánchez • Mar 1 '20

This seems promising. I will try it. Thank you

James Eastham • Feb 27 '20

Had no idea this was possible, great post Leira

Zachary Davis • Feb 27 '20

The CSS one was new to me haha, I see some nice troll error messages for my teammates coming in the future

Mitesh Kamat • Feb 27 '20

I like the console.table() as every now and then we deal with json response. This could come handy as it is readable.

Hamza Hamidi • Mar 3 '20

I prefer using the debugger over the console.log. This way I can control the steps I want to see from the debugger & most importantly I can see the call stack.