DEV Community

loading...
Cover image for Making your console log statements stand out

Making your console log statements stand out

Tulsi Prasad
Crafting meaningful web and mobile experiences
Originally published at wirescript.now.sh ・5 min read

Yes, the above image is from the console and you can customize the text however you like. To know how keep reading till the end.

It's been a while since my last post, it's because I got into learning some interesting stuff and undoubtedly writer's block was back. But recently, while working on a large repository that had a lot of stuff logged in the console I wanted a way to clear all the clutter and make my console statements stand out from the rest.

Here is how I was able to do that and how you could too.

So these are the possible options:

  • Using different console methods
  • Using various format specifiers (believe me, this is magic ✨)

Using different console methods

You might already know some of the basic ones, like:

  • console.log
  • console.info
  • console.error
  • console.warn

But some of the more cool ones, are:

console.table

This can be used to log large nested objects or arrays so you don't have to go through expanding each key to view the whole thing.

let peoples = [
  {
    name: "Richard Hendricks",
    location: "Berkely",
    cell: "4254-024-8162",
    age: 32,
  },
  {
    name: "Christiansen Frederikke",
    location: "Madras",
    cell: "4987-024-2562",
    age: 34,
  },
  {
    name: "John Doe",
    location: "California",
    cell: "3143-344-342",
    age: 53,
  },
];

console.table(peoples);
Enter fullscreen mode Exit fullscreen mode

Logging arrays into console

You can also log objects as such:

Logging objects into console

console.group and console.groupEnd

You can group a set of console logs having a particular meaning apart from the rest using this method.

const title = "Me and my boys";

console.group(title);
console.table(peoples[0]);
console.info("Weather is very beautiful today ☁");
console.warn("Don't fall for the beautiful weather");
console.groupEnd(title);
Enter fullscreen mode Exit fullscreen mode

This is what it'll return:

Demostration of console group

Pro Tip: Use console.groupCollapsed() to have the logs closed by default.

console.time() and console.timeEnd()

If at all you're ever interested to know how much time a particular block of code takes to run, you can achieve this using console.time().

console.time();
Array.from(new Array(400)).forEach(_ => console.log("Zzzz!"));
console.timeEnd();
Enter fullscreen mode Exit fullscreen mode

Demonstration of console time

console.count(label)

It logs incrementing counter values starting from 0. You can use label to distinguish between different counters. To stop one from counting above, you've to use console.countReset(label).

console.count("Awesome"); // Awesome: 1
console.count("Awesome"); // Awesome: 2
console.count("Awesome"); // Awesome: 3
console.count("Awesome"); // Awesome: 4
console.countReset("Awesome");

console.count("Awesome"); // Awesome: 1
Enter fullscreen mode Exit fullscreen mode

Using format specifiers

Believe it or not, console logs can be more than just simple messages. You can include an eye-catching message or something more convincing as your favorite dog image.

All because you can use format specifiers inside them. How?

List of available format specifiers

  • %s ⇒ Formats as string
  • %i ⇒ Formats as integer
  • %f ⇒ Formats as float
  • %O ⇒ Formats as object (yes that's capital O as in Oregano)
  • %o ⇒ Formats as DOM element
  • %c ⇒ Formats as CSS ✨

Formats as string, integer, float

console.log(
  "%s, told me that we're going to mall today with %s",
  "Alan",
  "Mike"
);
// Alan, told me that we're going to mall today with Mike

console.log("We had %i mangoes today", 56);
// We had 56 mangoes today

console.log(
  "Did you know, Tesla Model S can reach 0 to 60 mph in %f seconds?",
  2.3
);
// Did you know, Tesla Model S can reach 0 to 60 mph in 2.3 seconds?
Enter fullscreen mode Exit fullscreen mode

Formats as Object

Demonstration of using %O format specifier in console logs for objects

Formats as DOM Element

Demonstration of using %o format specifier in console logs for DOM elements

Formats as CSS

Adding your CSS to the second argument of console log by separating each of them with ; does the trick.

console.log(
  "%cThis is actually very interesting",
  "color: yellow; font-size: 35px; background-color: red;"
);
Enter fullscreen mode Exit fullscreen mode

Demonstration of using styles in console log

You can also add multiple styles in the same log by using multiple %c specifiers.

console.log(
  "%cThis is actually %cvery interesting",
  "color: blue; font-size: 55px; background-color: yellow;",
  "font-size: 55px; background-color: blue; color: yellow"
);
Enter fullscreen mode Exit fullscreen mode

Demonstration of using multiple style format specifer in single log

If that looks a bit messy and you have a lot of styles to give you can put the styles in a separate array and use them wisely.

let blackBackground = [
  "font-size: 50px",
  "background-color: black",
  "color: white",
].join(" ;");

let whiteBackground = [
  "font-size: 50px",
  "background-color: white",
  "color: black",
].join(" ;");

console.log(
  "%cAwesome stuff is %ccoming your way",
  blackBackground,
  whiteBackground
);
Enter fullscreen mode Exit fullscreen mode

Demonstration of using multi styles with join helper in console

Last but not the least, a picture says a thousand words.

let backgroundImage = [
  "background-image: url(https://source.unsplash.com/random/1200x800)",
  "background-size: cover",
  "color: hotpink",
  "padding: 100px",
  "font-weight: bold",
  "font-size: 25px",
].join(" ;");

console.log("%cPicture says a thousand words", backgroundImage);
Enter fullscreen mode Exit fullscreen mode

Demonstration of console log with text on image

You can do all sorts of manipulation and get more creative with the power of CSS, it's up to you.

If you're still wondering how the above banner was made, well here's that code.

let backgroundImage = [
  "background-image: url(https://i.pinimg.com/originals/5b/43/02/5b4302c2f6413454c782aeec866143cf.gif)",
  "background-size: cover",
  "color: black",
  "padding: 100px",
  "font-weight: bolder",
  "font-size: 40px",
  "-webkit-text-stroke-width: 1px",
  "-webkit-text-stroke-color: yellow",
  "text-transform: uppercase",
  "text-align: center",
  "letter-spacing: 1px",
].join(" ;");

console.log("%cMay the force be with you", backgroundImage);
Enter fullscreen mode Exit fullscreen mode

https://i.imgur.com/51XzT21.gif

That's it, super easy! 😃

Conclusion

For me, all that mattered was for the logs to stand out and be more catchy on pursuit of which I found out a ton of more cool stuff we can do, hope this gives you more clarity on the gem of a function, that console is.

Catch more updates on @heytulsiprasad 👋

Discussion (5)

Collapse
klvenky profile image
Venkatesh KL

The css one particularly stood out from the general articles with similar titles.
Pretty neat 👍

Collapse
heytulsiprasad profile image
Tulsi Prasad Author

Haha glad you liked it, the whole purpose was for them to stand out and we all know how good CSS is at doing that 😅

Collapse
klvenky profile image
Venkatesh KL

Yeah css is an awesome pandora box(for me)

Collapse
bcosynot profile image
Vivek Ranjan

These are cool! Thanks for sharing!

Collapse
heytulsiprasad profile image
Tulsi Prasad Author

Glad you liked it ❤️