JavaScript tip: format console.log output

You can format the output of console.log() using CSS. Use %c in your console log string and then add an argument for the CSS.

Here’s a simple script that uses CSS formatting to make a formatted console logger:

const fl = {
  log: function (title, message, color) {
    console.log('%c%s:%c %s', 
      `color: ${color}; font-weight: bold; text-decoration: underline ${color}`,
      'color: black',
      title, message);
  },

  info: function (message) {
    this.log('Info', message, 'green');
  },

  warning: function (message) {
    this.log('Warning', message, 'orange');
  },

  error: function (message) {
    this.log('Error', message, 'red');
  }
};

 

Here is the result in the console:

console formatting

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s