A Snazzy Trick: How To Style Your console.log() Messages

A quick guide (with examples) on applying CSS to log messages in the browser's console.

// Styling console.log messages with CSS
console.log("%cHello World!", "color: blue; font-size: 20px;");

THE PROBLEM

Our console messages don't grab users' attention.

A basic console.log message.

How can we make them more engaging?

A SOLUTION

By including a %c in console.log's first argument, and passing some CSS declarations as the second argument, we can style the message on the browser's console.

A styled console log message! 🌈

Here are some ideas

Change color in your browser's console.

Change font-family and font-size in your browser's console.

Apply several styles to the same string.

Reuse console.log styles.

Many websites use this trick to grab the curious developers' attention or to prevent non-technical users to run code on the console. Some of them are Facebook, Pinterest, and Gmail.

Thanks for reading! Take care, Jon Portella.

Get notified of new blog posts?

RSS is the correct choice, btw.