Console.log like a pro!

1 minute read

We have a lot a tools to debug our applications but the most beloved is with no doubt using console.log, something like this:

if (isOdd) {
  console.log("is odd!");
}

But…

What if I told you that the console object has more methods?

We can format the output in a table for instace using the console.table methods, like so:

const me = {
  name: "Eduardo",
  lastName: "Ortega",
  favLanguage: "C#",
};

console.table(me);
┌─────────────┬───────────┐
│   (index)   │  Values   │
├─────────────┼───────────┤
│    name     │ 'Eduardo' │
│  lastName   │ 'Ortega'  │
│ favLanguage │   'C#'    │
└─────────────┴───────────┘

We have also the count method which basically counts how many times that line of code has been called, perfect if you want to count how many times a method is called:

const hoorayGenerator = (name) => {
  console.count("Hoorays count");
  return `Hooray for ${name}`;
};

hoorayGenerator("Eduardo");
hoorayGenerator("Alicia");
hoorayGenerator("Rafael");
Hoorays count: 1
Hoorays count: 2
Hoorays count: 3

You can add an assertion and be sure that that line is only being logged if a specific condition is false:

const IsThisTheRealLife = (isRealLife) => {
  console.assert(isRealLife, "It is just fantasy");
};

IsThisTheRealLife(true);
IsThisTheRealLife(false);
Assertion failed: It is just fantasy

And many more, you have the full documentation at MDN

Bonus for web developers, you can style the output of our beloved console.log:

console.log("%cWHAT!?!", "font-family:arial;color:red;font-weight:bold;font-size:20px");

console.log styled

Happy coding!