DEV Community

loading...

Beyond Formatting Your Console: Styling Your console.log()

Annie Liao
Hybrid developer/designer currently exploring a variety of front-end magic.
・2 min read

console styling demo

Last week I shared three handy dev tools that let us format our console outputs beyond the plain-old console.log(). Today I learned one more neat trick to "prettify" our console.

This trick is so simple, all you need to do is add a special indicator inside your console.log().

Let's see how it works with pure strings:

  1. Add this set of characters, %c, at the start of the string.
  2. Pass in an additional argument, which contains the style of the string. As you can see below, the syntax is basically the style attributes of an HTML element.

That's it! Feel free to play around on your browser console:

console.log('%c Style me pretty 💋', 'font-family: "Impact", sans-serif; font-size: 100px; color: black; background: #ffc600;')
Enter fullscreen mode Exit fullscreen mode

Now to the practical use.

Say you want to test how a variable, lastChecked, gets reassigned inside a function. Aside from writing out the current output of the variable in your console.log(), you can insert the styling as an argument, like so:

console.log('%c lastChecked before shiftKey: ', 'color: black; background: #BADA55;',lastChecked)
Enter fullscreen mode Exit fullscreen mode
console.log('%c lastChecked inside shiftKey: ', 'color: black; background: #FFC600;', lastChecked)
Enter fullscreen mode Exit fullscreen mode
console.log('%c lastChecked after shiftKey: ', 'color: black; background: #3EA055;', lastChecked)
Enter fullscreen mode Exit fullscreen mode

Just like that, you are presented with a colorful console log with clear distinctions between different stages. It is a cool alternative to organizing your console outputs, similar to the console.group() method as mentioned in my previous post.

style console with variables


Finally, you might be wondering how I found out about those little tricks.

In addition to the wonderful search engine, I have been coding along with the popular, FREE JavaScript30 tutorial by Wes Bos, who kept introducing fascinating dev tools along the journey and creating a fun, delightful JavaScript learning experience.

I highly recommend checking it out if you haven't already.

Discussion (0)