DEV Community

Cover image for Styling your JavaScript Console Outputs
MD JUNAID ALAM
MD JUNAID ALAM

Posted on • Updated on

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');
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

Output:

Colorful Console Output

Reference

Mozilla Web Docs - Console

Top comments (0)