Styling JavaScript Console.log

Did you know we can style the output from a console.log on a modern JavaScript Console?
It may not be something to do all the time but for that particular occasion where it will make a difference here it is the recipe:

console.log("%cHello World!", "color: red; font-family: Verdana");

It outputs Hello World!

What about a multicolor output?

console.log("%cHello %cWorld!", "color: red; font-family: Verdana","color: blue; font-style: italic");

It outputs Hello World!

The secrete is in the %c which serves as a placeholder for the style that follows as the second or third arguments.

Advertisements

Author: tarau

technical writer, web technologies

1 thought on “Styling JavaScript Console.log”

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s