Style Console Output in JavaScript

2 min readNov 12, 2019

Style Console Output in JavaScript — Code tidbit by Bunlong

When writing a complex web application one of the important debugging tools is using the logging facility the environment provides. This can help the developer see what’s going in the application without interfering with the real UI.

The standard way to print out a message to the JavaScript console of the web browser (or Node application) is using the log method of the console object. It accepts a list of strings and objects and prints them to the console.

Actually, the console object has several additional methods that can be used to fine-tune the logging. There are debug, info, log, warn, error.

You can use the %c directive to apply a CSS style to console output, it help you easily identify debug information in the console.

Browser’s Debugging Console

1. Basic Text Styles

// Single Text Styles
console.log('This is %cmy stylish message.', 'color: yellow; background-color: blue;');

// Multiple Text Styles
console.log('This is %cmy stylish message. %cAwesome!', 'color: yellow; background-color: blue;', 'color: blue; background-color: yellow;');

The text before the %c directive will not be affected, but the text after the %cdirective will be styled using the CSS declarations in the parameter.

2. Refactor Text Styles

You can clean up the text using %s string substitutions.

const styles = 'color: yellow; background-color: blue;';
const text = 'This is my stylish message.';
console.log('%c%s', styles, text);

You can clean up the styles by passing the styles as an array and then use the join() method to turn the array elements into a string.

const styles = [
  'color: yellow',
  'background-color: blue',
].join(';');

const text = 'This is my stylish message.';
console.log('%c%s', styles, text);

Node Debugging Console

You can print the colorful text in Node application as well.

console.log('\x1b[33m%s\x1b[0m', 'This is my stylish message.');

Color Reference on Stack Overflow.

References

Thanks for reading ❤
Say Hello! Twitter | Github | LinkedIn | Facebook | Instagram