Quick tips: How to style (add colors, backgrounds etc.) logs and comments in browser console

,

It is another short post about nice and very useful feature in category of “Quick tips”.

I don’t know if someone from people reading this have this irrepressible curiosity for looking inside websites sources? If yes, leave me a comment, I will feel less strange 🙂 I have and I was wondering one time how it is done for example in Pinterest’s website (http://www.pinterest.com) when you go to Developer Tools and Console and you see a nice and colorful comments encouraging webdevelopers to apply for job in Pinterest (see screenshot below).

pinterest-console

And of course I stared digging, reading and experimenting. It turns out that Firebug has supported custom CSS for console.logs since 2010 (https://github.com/firebug/firebug/commit/b9364983d072dd86ccf93d6426b3a41f7272f3d6)  and Chrome support has been added as of Chrome 24. It was officially added to Webkit engine in 2012.

It all comes down to "%c" parameter inside first argument of console.log function. When "%c" appears anywhere in the first argument, the next argument is used as the CSS to style the console line. Further arguments are concatenated (as has always been the case). See the simple example below.


console.log('%c I want to be red! ', 'color: red');

Of course there are multiple solutions to use it. We can style our logs according to their importance or role, we can adjust our comments and present them in unusual way or we can, of course, attract our curious visitors who visited our website’s console.

We decided to use it in new, refreshed release of our website (http://www.sicc.pl) which we fired yesterday (!). According to the rule that “done is better than perfect”, we went live with what we had in our sourcecontrol and we will adjust it in the nearest future (in how we call it – “free time”).

sicc-new-website(Click image to see what we have done and what we are doing in our business as well)

Going back to the subject, everyone could also notice that we use “fancy” comments inside console logs. We decided to re-use solution made by Pinterest and analyze how many developers / webdevelopers / etc. let us know about theirs discovery. We will find out 🙂

You can see how this more advanced example is made. We wanted to split text in couple colorful words. So as you see, we can use multiple “%c” parameters and we can add as many CSS style parameters as we want to fit our first parameter “%c” stylings.

console.log(
'%c ♥ %cweb %cor %cmobile%c? --> %cjoinSICC() ',
'background: #ddd; color: red; font-weight: bold; font-size: x-large;',
'background: #ddd; color: #f36f21; font-weight: bold; font-size: x-large;',
'background: #ddd; color: #000; font-weight: bold; font-size: x-large;',
'background: #ddd; color: #f36f21; font-weight: bold; font-size: x-large;',
'background: #ddd; color: #000; font-weight: bold; font-size: x-large;',
'background: #ddd; color: red; font-weight: bold; font-size: x-large;'
);

So… now you know (if you didn’t before reading this) how to put original comments and logs inside your website or webapplication. For extreme usage and for filling your curiosity what exactly we could do with this comments & logs, please visit: http://stackoverflow.com/a/21457293 🙂

Have a great weekend!