Styling your JavaScript Console Outputs

JavaScript Console is widely used by developers for executing JavaScript codes, debugging, logging, etc.

Below are some mostly used methods provided by Console

• log() - This method outputs the given message to console.
• info() - This method outputs the given message to console as a Informational message.
• warn() - This method outputs the given message to console as a Warning message. The color of the message would be Yellow by default.
• error() - This method outputs the given message to console as a Error message. The color of the message would be Red by default.
• clear() - This method clears the console.

There are many more methods provided by Console but we don't need in this article.

In following ways we can out a message to console. I am taking console.log() for example.

console.log('I Love DEV');
console.log('I Love %s', 'DEV');

Output:

Observe in second line console.log('I Love %s', 'DEV'), here %s is String substitutions. Below are the string substitution used for other types :

• %o or %O - used to output objects,
• %d or %i - used to output integer,
• %s - used to output string,
• %f - used to output floating point values.
• %c - used to add styles.

Now, let's come to main agenda, styling our console outputs.

You got it right. We would be using %c for styling our console output. Let's style our first console output.

console.log('I Love %cDEV',  'height:40px;width:50px;padding: 3px 7px 3px 9px;background:#000;color:#fff;border-radius:4px');
console.log('I Love %c%s',  'height:40px;width:50px;padding: 3px 7px 3px 9px;background:#000;color:#fff;border-radius:4px', 'DEV');

Output:

Let's add more styles:

console.log('%cI Love %cDEV', 'color:#4caf50;font-size:18px', 'height:40px;width:50px;padding: 3px 7px 3px 9px;background:#000;color:#fff;border-radius:4px');

Output:

Reference

Mozilla Web Docs - Console