Like `console.log` But Better

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 enhance your debugging experience with the console.

Did you know the console has more properties than log? Try it yourself! Write this into your console and be amazed.

console.log(console);

I will go through the ones I find the most useful.

console.table();

This method displays your arrays and objects in a neat table. It takes in two parameters, the data, and the names (in an array) of the columns you wish to display (optional). Every element, or property, will correspond to a row in the table.

Example:

const array = [1, 2, 3, 4, 5];
const object = {
  name: "Leira",
  lastName: "Sánchez",
  twitter: "MechEngSanchez",
};

console.log('array: ', array); 
// array:  [ 1, 2, 3, 4, 5 ]

console.log('object: ', object); 
// object:  { name: 'Leira', lastName: 'Sánchez', twitter: 'MechEngSanchez' }

What is displayed when using table, is much more organized and easy to understand.

console.table(array);

console.table(object);

console.count()

This method keeps a count of how many times it has been called. I mostly use it to check that my functions are being called when I expect them to. You can provide it with a string as a parameter. It will serve as the label. If left blank, the default label is "default".

let dev = '';
const followMe = (dev) => {
    console.count('followers');
    return `${dev} is following you`;
}

followMe('John'); // followers: 1
followMe('Karen'); // followers: 2
followMe('Camila'); // followers: 3

console.assert()

This method only writes to the console if the assertion is false. You will not see it if it's true. The first parameter is what it will make the check on. The second one is the error message you wish to display.

const sum = (n1, n2) => {
    console.assert(n1 + n2 === 10, 'Not 10');
};

sum(3,2); // Assertion failed: Not 10
sum(5,5); //
sum(10,0); //

Style the console.log

Labels

A quick, easy way to organize and keep track of your console.logs is to add labels. Simply, add a string as the first parameter and whatever you want to log as the second. I also like to add a colon and a space for readability.

const firstName = 'Leira';
console.log('First Name: ', firstName); // First Name: Leira

You can add a string as every other parameter to add multiple labels to multiple values but I find that can get messy fast.

const lastName = 'Sánchez';

console.log('First Name: ', firstName, 'Last Name: ', lastName);
// First Name: Leira Last Name: Sánchez

Messy, right?

Add Flair with CSS!

Make your logs colorful and pretty. Just add '%c' to the front of a string as the first parameter. The second parameter will be the CSS styles as a string.

console.log("%cCLICKED!", "font-family:arial;color:green;font-weight:bold;font-size:3rem");

Let me know in the comments how else you use these or what other methods you find useful!

Comments

[Ben Halpern]

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]

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

[Dave Blythe (he/him)]

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

[Cathy Casey-Richards]

These are great tips! Thanks for sharing 😄

[Fernando Garcia]

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

[trungmnguyen]

Good work. Very helpful and informative.

[Zachary Davis]

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

[Mitesh Kamat]

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

[James Thomson]

Don't forget about console.dir! 🙂

[Navin]

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

[Pavan Maheshwari]

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

[James Eastham]

Had no idea this was possible, great post Leira

[Navin]

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]

This seems promising. I will try it. Thank you

[Wahdan]

Long live “console.log”

[Kyla]

All of this information is blowing my mind, especially the fact that you can style console outputs!

[Leira Sánchez]

I’m glad you find it useful!

[Loïc Giraudel]

I now prefer log points in Chrome Dev Tools. It was already possible before with conditional break points but not as easy as the log points :)

[Leira Sánchez]

I have never tried log points. I will look into them. Thank you

[Tyler Smith]

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]

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

[Vasily Belolapotkov]

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

[Sargis]

Don't forget about console.time

[Leira Sánchez]

Great when pairing it with console.timeEnd() !