Quasilinear Thoughts

- A developer's log book.

Published on

How to create formatted console log messages

Authors

Have you ever opened developer tools on FB page? Did you see some warning messages in the Browser console that is formatted using custom styles and wondered? how it's done?

formatted-text-image

This made me curious to look at how is such formatting done.

You may already know that console messages are printed using console.log() method. An interesting part of FB console message is it is styled and also hyperlink of Facebook's self xss.

After some research, I came to know that console API supports such functions.

How to Apply CSS Styles to message in console:

To apply styles for the text in the console, we use the format specifier %c.

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

All the text after %c will be formatted with the format arguments. You can your own CSS styles to format your text.

someimage

Get more information from Google's Styling Console Output with CSS

Comments are closed but If you want to respond, please send me a message over WhatsApp or facebook or tweet or send email.

Khalil

Khalil Ganiga

Just another programmer.. This blog expresses my views of various technologies and scenarios I have come across in realtime.

Keep watching this space for more updates.