How to Add Colorful Styles to console.log Messages in JavaScript

When developing JavaScript you often use console to output debug information. The console API also allows you to apply CSS styles to the printed text, making logs easier to spot among many messages.

Why use styled console output? In applications with large amounts of logs, colored or formatted messages help you quickly identify the information you care about.

Example of a simple styled log:

console.log('%cHello', 'color: green; background: yellow; font-size: 30px');

The %c placeholder tells the console to apply the following CSS string to the preceding text.

You can also define a list of style strings and join them:

const styles = [
  'color: green',
  'background: yellow',
  'font-size: 30px',
  'border: 1px solid red',
  'text-shadow: 2px 2px black',
  'padding: 10px'
].join(';');

console.log('%cHello There', styles);

Another placeholder, %s, works as a string substitution:

const styles = ['color: green', 'background: yellow'].join(';');
const message = 'Some Important Message Here';
console.log('%c%s', styles, message);

A small amount of styling can greatly improve debugging efficiency.

Source: translated from Medium article .