We support #BlackLivesMatters !
If you support us then follow us by clicking here and following us!

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

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