loading...

How to make console.log() output colorful and stylish in browser 🌈

hanakivan profile image Ivan Hanák ・3 min read

Hello there!

Somebody wants the console of their website to look cool, don’t you? 😎

So in this article we will have a quick look, how to style console output with CSS.

Table of contents:

  • How does it work
  • What are my options
  • How to do it <<<<—– here’s the actual guide!

image-1.png
The image above shows facebook.com's console output warning for non-programmers who were told by spammers and scammers to put some code there.

How does it work

First of all, it is not complicated at all. It is just a bit of css code applied to a console.log call. That’s it.

What are my options

You can not use obviously all of the CSS properties, but with the ones you can use, you can accomplish a lot.

You can style your console outputs with:

  • background*
  • border*
  • border-radius
  • box-shadow
  • float + clear
  • color
  • cursor
  • display
  • font*
  • line-height
  • margin (must use also display: inline-block)
  • outline
  • padding (must use also display: inline-block)
  • text* (text-transform for example)
  • white-space
  • word-spacing
  • writing-mode

In the end, you can accomplish a lot, can’t you? 😉

How to do it

It works with any of the console.* calls (console.log, console.warn…etc).

It works based on %c directive.

So you put %c into your text and for every %c you need to put another string parameter that contains style into console.*() call.

Style format

The styles have the format exactly as if you were to write styles in your *.css files, you put a casual “kebab case” properties (font-family: Roboto; color: #ccaa44, …) separated by a semicolon.

Here’s an example: (try it now!)

console.log("And %cthis%c is %chow%c %cyou%c can style your console logs", "color: red; font-family: monospace", "" ,"background-color: orange", "", "font-weight: 900", "");

A simple example: (try it now!)

console.log("%cThis will be styled%c and this won't", "color: blue; background-color: orange; font-weight: 900", "");

Here’s the catch!

Once you use %c directive, every character that follows will be styled.

Therefore don’t forget to put a closing %c character into your text and also another argument to the console log as empty string as within the example above – so as “empty style object” can be applied.

That’s it!

There you have it guys, it was this easy. Also, one more important note, if you have implemented some funny console message that shows up when a visitor loads your website, just make sure the console.log call will not get removed by babel or any other code preprocessor or minifier 😂 .

If you want to study this in a more detail, checkout an official Console API documentation on MDN explaining a bit more.

And also if you liked this article, don’t forget to share it with people you like (or maybe also people you don’t like, maybe you’ll became friends! 😆 ).

It is only matter of time ’till we see some exciting news again so if you want to be amongst the very first ones to hear about them, subscribe to my newsletter right here.

Anyways, thanks for reading and I’ll see you in the next article! 🤓

Yours in coding,

Ivan

p.s. thanks for the cover image goes to Photo by Oskar Yildiz on Unsplash

Posted on by:

hanakivan profile

Ivan Hanák

@hanakivan

#softwareengineer 👨‍💻 · #blogger 📝 · #thoughtspammer 🥺 · #businessstudent 🕴️

Discussion

markdown guide