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

[admin]

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:


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
);