How to format messages in console.log() in JavaScript

We know that the console.log() function will log a message to the console, but console.log() can also format the text and make the message stand out from other messages. This gives us the ability to find important messages in the console.

Format specifier

Format specifiers define the type of data to be printed on standard output. We can use format specifiers to tell the log function how the data should be printed. For example:

%s → Formats the value as a string.

var a = 10;
console.log("%s treated as string", a);

Below is the list of format specifiers we have:

• %s → Formats the value as a string.

• %i or %d → Formats the value as an integer.

• %f → Formats the value as a floating-point value.

• %o → Formats the value as an expandable DOM element, as seen in the Elements panel.

• %O → Formats the value as an expandable JavaScript object.

• %c → Applies CSS style rules to the output string as specified by the second parameter.

We will be using %c, a format specifier that applies CSS style rules to the output string. We pass the CSS as a string to the second parameter.

console.log("%cJavascript Jeep 🚙in Blue", "color:blue; font-size:50px");

The above code will result in:

Having multiple styles

We can also apply multiple styles to the message. Use %c before each part of the string and pass a separate style for each %c.

console.log("%cJavascript Jeep 🚙in Blue %cJavascript Jeep 🚙in red", "color:blue; font-size:50px", "color:red; font-size:50px" );

Passing the style as a string

var style = "color: red; background: #eee; font-size: 50 ";

console.log("%c Javascript Jeep 🚙in Blue",  style);

Adding an image to the console

We can add an image to the console by using the background-image property from CSS.

var styleArray= [
  'background-image:    url("https://media.giphy.com/media/2dQ3FMaMFccpi/giphy.gif")',
  'background-size: cover',
  'color: #fff',
  'padding: 10px 20px',
  'line-height: 35px',
  'width : 70px',
  'height : 70px',
  'border : 5px solid black'
];
console.log('%cI love you!', styleArray.join(';'));

Surprising your customers

var style = 'color: tomato; background:#eee; -webkit-text-stroke: 1px black; font-size:30px;';

console.log('%cHi, We are Happy 😆 to have you as our customer', style );

Creating the Facebook stop 🛑 message in the console

If you have opened the console on Facebook, you have undoubtedly been greeted by the “stop” message. Instead of “stop”, let’s print a welcome message.

const style = 'color:red; font-size:30px; font-weight: bold; -webkit-text-stroke: 1px black;'
console.log("%c Javascript Jeep Welcomes you", style);

---

Tips

If you want to prevent console.log from being used by users, then we can assign the value of console.log to our function.

console.log = function() {
   console.error(" Logging by user is disabled ");
}
console.log("Testing...");