loading...
Cover image for Styling your JavaScript Console Outputs

Styling your JavaScript Console Outputs

dejunaidam profile image MD JUNAID ALAM ・2 min read

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:

Console log Syntax

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: *

Colorful Console 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:

Colorful Console Output

Reference

Mozilla Web Docs - Console

Discussion

markdown guide