Welcome to %s forums

<No. 1 Community for developers, by developers/>

Login Register

How to format the style of console's output in javascript using developer tools?

Get support on JavaScript,jQuery, AJAX and other related technology.
Post Reply
admin
Site Admin
Posts: 45

How to format the style of console's output in javascript using developer tools?

Post by admin » Sun Oct 20, 2019 5:26 pm

Formatting console output
Many of the console's print methods can also handle C-like string formatting, using % tokens:

Code: Select all

console.log('%s has %d points', 'Sam', 100);
Displays Sam has 100 points .

The full list of format specifiers in JavaScript is:
%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
%O Formats the value as an expandable JavaScript object
%c Applies CSS style rules to the output string as specified by the second parameter

Advanced styling
When the CSS format specifier ( %c ) is placed at the left side of the string, the print method will accept a second
parameter with CSS rules which allow fine-grained control over the formatting of that string:

Code: Select all

console.log('%cHello world!', 'color: blue; font-size: xx-large');
Displays:
Image

It is possible to use multiple %c format specifiers:
  • any substring to the right of a %c has a corresponding parameter in the print method;
  • this parameter may be an empty string, if there is no need to apply CSS rules to that same substring;
  • if two %c format specifiers are found, the 1st (encased in %c ) and 2nd substring will have their rules defined in the 2nd and 3rd parameter of the print method respectively.
  • if three %c format specifiers are found, then the 1st, 2nd and 3rd substrings will have their rules defined in the 2nd , 3rd and 4th parameter respectively, and so on...

Code: Select all

console.log("%cHello %cWorld%c!!", // string to be printed
"color: blue;", // applies color formatting to the 1st substring
"font-size: xx-large;", // applies font formatting to the 2nd substring
"/* no CSS rule*/" // does not apply any rule to the remaining substring
);
Image

Post Reply