Styled Console Logging

By Nethru Limited (www.nethru.com)

Debug

Recently, I found an interesting thing when displaying console logging. We can add styles to the console logging message. I have tried they are working on Chrome Developer Tools and Firebug.

Here is the method, just add %c in your logging message and input the style in the second parameter. The styles syntax are just the common CSS styles. So, you can control the font size, color, background, font family as you like.

console.log("%cYour Message!", "The CSS styles.");

Here is the sample output.
Styled Console Log 1

You can also use different styles for different text. Just add %c to any words you would like to have styles and add the CSS styles in the following parameters.
Styled Console Log 2

Facebook also added a styled console logging message as a warning message. Here is the sample.
Styled Console Log 3

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *