Formatting output in Browser Console

Did you ever open developer tools on Facebook page? Did you see some warning message in Browser console that is formatted using custom styles and wondered how it's done?

One day I was also browsing internet and opened dev tools on Facebook and found a beautiful message not to open dev tools. That made me curious to look how such formatting work's. The messages in the Developer console are usually printed using the Console.log() function. But the interesting thing in Facebook message was the styled font and also hyper link of Facebooks selfxss.
facebooks-console
Facebooks warning in developer tools Console

I never knew before that console API supports such functions. By going through the Chrome Dev tools API documentation, I found some formatters that support styling the console messages.

To apply CSS styles to text in Console, We use  – "%c". There are more format specifiers which you can find here

All other formatters are pretty common and you might have seen them before. So, in this post we will be seeing just the style formatter.

How to Apply CSS Styles to the Text in Console

To apply styles for the text in console, we use the format specifier "%c". Example is as follows

console.log("%cHello World!","font-variant: small-caps;color:blue; font-size:30px;font-weight:Bold;")

inline-style-in-console

All the text after %c will be formatted with the format arguments.
You can your own CSS styles to format your text. You can also use multiple format strings like the below example

var border= "border: 5px solid black;"
var style = "font-variant: small-caps;color:blue; font-size: 40px;font-weight:Bold;"
console.log("%cHello, World!", style + border)

reusable-styles-console

Multiple styles can be applied at the same time. You just need to take care of the arguments order.

console.log("%cHello, %cWorld!", style, border)

multiple-styles-console

Displaying a Hyperlink in Console

You can directly embed a link in the message of console. It will be shown as a hyperlink by the console. Here is an example
console.log("%cwww.tricksstar.com",style)
hyperlink-in-console

That's all for today. Find more awesome stuff in the related posts below.

0 comments:

Post a Comment

Please DO NOT SPAM. You're not allowed to use links in comments unless it's necessary.

I Appreciate your valuable Feedback.

Regards,

www.TricksStar.com