Down the rabbithole

ekov @


Ever seen those styled console.logs when opening the dev console on some random website? Cool, right? Calls to console.log (and .warn, .info etc.) can be styled with inline CSS, but it始s not really well documented, so let始s experiment with it a little.

I have no idea what you are talking about (or: some examples) *

Open the console on Protonmail or to see a nice message, or check Google[1] and Facebook for warning messages for non-developers. Displaying a (which I find better than log for this purpose) can be very useful to attract developers, and warn everyone else that this is not the place to tinker unless they know what they are doing.

There始s not much on the official console spec[^2], so we have to experiment a bit. I will use console.log for the sake of simplicity, but this should work with all of the printing console methods.

Basic text styling *

The basic syntax is putting %c (let始s say C for CSS) before the string, so the console knows it has to interpret the next input as styling.

console.log('%cKittens everywhere!', 'color: pink');

Which results in something like this:

Of course, we can specify some more styles, but the text will always behave like an inline element (so it can始t have height etc.)

  '%cFancy log',
  'font-family: Georgia; font-size: 18px; text-shadow: 1px 2px 4px #ddd'

Looking like this:

Multiple styles *

We can change styles within one call to log too (like Protonmail does), by adding %c wherever we want to change style, and defining a style (which can be an empty string) for each of them, like so:

  '%cPink%c, %cred %cand %cblue',
  'color: pink',
  'color: red',
  'color: blue'

Looking like this, the empty styles printed in black:

Going wild: images *

This is a bit hacky, but possible. Text printed on the console can have a background property, which 鈥 you guessed it 鈥 can be an image! So I can do this (the font-size is important here, as it will define the image height):

  '%c        ',
  'font-size: 60px; background: url( no-repeat;'

There, a cat in the console.

Going really, really wild (maybe don鈥檛 do this in production) *

Open the console to see if it works with gifs.[^3]

That始s all for today, remember to check your console for error messages[^4] (most importantly in production), and say hi to fellow developers.

  1. By the way, google 鈥渢ext adventure鈥 and check the console for a full-blown easter egg game, complete with console styling. [^2]: Formatting specifiers 鈥 Console standard on WHATWG [^3]: Not in Firefox. [^4]: Ah, another hack: console.error = function() {}; suppresses all error messages. 鈫╋笌

Previous: Building a reading progress bar