Style Output in Webkit Developer Console

The Chrome or Webkit Developer Console is not as boring as just plain monospace texts, it is very little known that one can output text with different styles like colors, size and even backgrounds to give the console output an attractive look and don't have to learn any new language to do that, our good 'ol CSS is all that is required.

If you have ever opened the console on Facebook's or GooglePlus' site you may have seen such a formatted and styled output text in the console, you too can do that, and using it you may be able to do even more creative stuffs than just outputting styled text (An example awaits at the end of the post).

The Syntax To Do It

To make a particular output text in the console have CSS styles you have to pass the styles as arguments to the console.log() method, but do remember you also have to mark the text you want to be styled with this particular keyword: %c

> console.log("%Enlarge This Text", "font-size: 32px;");

This code statement would output the text with its fonts size 32. The second parameter as you can see if the familiar CSS you use, though keep in mind that not all CSS properties would work, but that doesn't mean you must stop, keep experimenting.

What about multiple text?

That too is fairly simple, you just have to put the keyword or the specifier %c in front of each part of the text and pass an extra parameter to the function with the styles for the extra text part(s). Here's an example

> console.log("%Enlarge This Text %cMake Me Bold", "font-size: 32px;", "font-weight: 800;");

It is that simple, you can add as many different parts as you like, all you have to do is include the extra parameters with CSS rules to style each part you have.

To what extent can it go? A Creative Use

The thing we all like about the web technologies is that you can keep on extending things to use it for things that it isn't even made for. As I promised here is an example, a Codepen actually, which I created.

Go to the Pen: Now open the console and see who's waiting to be discovered!

Know more about it

Want to know more? Head over to Google Chrome's documentation on styled output in devtools.