Styling logs in browser console

Few days back, I was just playing around with Facebook’s div elements to get an insight how the various html divs are structured, rendered and how they reacted on various interactions.

I opened the inspect element window and saw something which I never saw in console tab.

Image 1: Facebook.com screenshot with console tab on

Yes, custom styling of logs in console tab.

This is the perfect use case of styling logs to alert the naive users about the risk. I found this crazy and I started digging in and experimenting more about custom logs.

To add styles to logs, the method expects `%c` within the first argument of console.log() and it picks up the very next argument as CSS style for the %c pattern argument text. Try the following basic example now in this tab’s console window.

Image 2: Basic example for custom log

If you want to add multiple style, then simply add multiple %c text and add style arguments respectively.

Image 3: Custom log with multiple styles

Please note, there are two %c pattern text and hence two CSS style arguments. And the CSS arguments are picked up respectively from left to right.

Let’s mimic Facebook’s console log style.

Image 4: Facebook like danger message on console window

To achieve this, we need only the color of the text as red and its outline. And to get outline around the text we are going to add four text shadows with zero pixel blur. Read more about text shadow CSS style.

We can also generate the rainbow styled text, using the following CSS.

console.log('%c Rainbowww!', 'font-weight: bold; font-size: 50px;color: red; text-shadow: 3px 3px 0 rgb(217,31,38) , 6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) , 15px 15px 0 rgb(2,135,206) , 18px 18px 0 rgb(4,77,145) , 21px 21px 0 rgb(42,21,113)');

Image 5: Rainbow styled CSS

The custom logs can be used in different scenarios depending on its importance. These styled logs are generally for a set of users who are curious enough to visit the console log window.

Pinterest.com has also made very good use of custom logs. Visit pinterest’s console window now and type joinUs() in console tab, it will redirect you to their career’s page.

Firebug has added custom logs in 2010 (click here) and Webkit engine has officially added this feature in 2012 (click here).