Quick Tip: Fun with JavaScript Console in Browsers

All modern browsers nowadays have integrated development tools among which there’s a JavaScript console where you can type in some JavaScript and test your ideas, debug your code or see output from your script’s previous events. But the console is capable of so much more. Well, actually IE’s console is somewhat more limited than others, but the rest of them are pretty cool. To get an idea of the possibilities visit the chrome developer tips and tricks page to learn more. One of the fun and useful things you can do in a console is logging highlighted text. This can be achieve using the C-style formatting notation %c in logging statements e.g.

console.log("%clook at me", "background:yellow");

You can shape the text any way you want using familiar CSS styling. It’s possible to change the font family, font size, add some text decorations like underline, strike-trough or apply a shadow effect, just remember to separate them using a semicolon.

console.log("%cfunky text", "background:yellow; font-size: 20px; color: blue; text-shadow: red 0px 0px 6px;")

The only thing I was not able to do was using a custom font i.e. one that is not provided by the OS. I tried using @font-face to specify the external URL of the font, tried using @import to import external CSS. I even tried embedding the whole font as base64 encoded string to check whether it’s the @font-face that is not being processed or the problem lies with retrieving external resources. Since it didn’t work I assume that it’s ignoring everything you might put before the curly braces. In fact if you enclose your styling with curly braces – it won’t work. So you can modify the style only of the text that you’re outputting, not the whole console. If you know that it’s actually possible to use custom fonts I would like to know how that’s done, so please leave a comment.

Besides the practical there’s also a fun side to this. Even though it seems you can’t use external fonts, but you can use fonts with pictures in them that are provided by your OS like Wingdings. And you can leave your own signature in the console on your page or just a message for the curious ones that will peek at the console when visiting your page.

console.log("%ck", "font-family: Wingdings; font-size: 24px")

The snippet above would print a nicely styled ampersand symbol on Windows. But unfortunatelly different OSes include different fonts and users viewing your page from a Linux machine or a Mac would most likely not be able to see your message as you intended it. But there’s another thing you can do – images. Yes, you can use images in the console. Well, actually you can set the background to display an image and then put some blank characters so that it gets rendered correctly.

console.log("%c  ", "background-image: url('https://cloud.githubusercontent.com/assets/6187567/2544544/434705aa-b602-11e3-9a1c-6868c69bd4b8.png'); background-repeat: no-repeat")

But typically console lines that are meant for logging are only about 13 pixels in height, so sany larger image would be cut off and if you would try it with a larger image that has a white background it would seem that it just doesn’t work. There’s actually a very simple way to get around this, you just need to set the font size high enough so that your whole image would be displayed. And if you don’t want to use the full size of your image, you can even specify the background size so that it scales correctly.

console.log("%c  ", "background-image: url('http://i.imgur.com/r9nq6d2.png'); background-repeat: no-repeat; background-size: 88px 128px; font-size: 128px")

Also note that if you try to add some text after the whitespace you left for the image, it will appear quite large. If you want to add a message on the same line but with smaller text you can do this by adding a third string parameter with your text. The styles you specified will not be applied to it and so you’ll still be able to print out a message of decent length if you need to.

console.log("%c  ", "background-image: url('http://i.imgur.com/r9nq6d2.png'); background-repeat: no-repeat; background-size: 88px 128px; font-size: 128px;", "ho ho ho")

Oh and by the way, the animated GIFs do work and are pretty cool way to surprise someone :) Have fun and check out Chrome developer docs for more information.