Finding other syntaxes for console.log("%cText", "css:value")

user_1525840 0
Viewed 93

I just found out that it's possible to do magic in the console by adding a second argument in console.log(...) containing CSS formatting. The trick is to prefix the text by %c. For instance, the following.

const text = "I am feeling blue";
const css = "color: orange;";
console.log("%c" + text, css);

While it being awesomely nice to have on occasion, I can't help wonder if there's more to the %something syntax from a nerdy deep-dive perspective.

I guess the c stands for css and the percentage sign is some kind of escape character I haven't been aware of. I googled that too but due to the syntax being used, it's a bit hard to specify what I'm looking for. And, as we all know, Google sucks at reading minds.

The question is twofold. What other syntax is available for the console logging, especially with the percentage sign (that seems to be a tool'ish thing) and/or how can I google to research the stuff myself?

console.log console javascript
2 Answers

Console Namespace which includes all the definitions of functionality https://console.spec.whatwg.org/

another useful link https://developer.mozilla.org/en-US/docs/Web/API/console

other % syntax include

%o or %O    Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.

%d or %i    Outputs an integer. Number formatting is supported, for example  console.log("Foo %.2d", 1.1) will output the number as two significant figures with a leading 0: Foo 01

%s  Outputs a string.

%f Outputs a floating-point value. Formatting is supported, for example  console.log("Foo %.2f", 1.1) will output the number to 2 decimal places: Foo 1.10

CSS styling

To test immediately

you can run this command by inspecting StackOverflow and past it in the console section and press enter 

console.log("This is %cStackoverflow", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
user_136475740

Console Format Specifier

how works it? Console Format specifiers contain the symbol %, after a letter that specifies we write the kind of formatting that should apply to the value.

We can pass second parameter to console.log as the effect changes on the String message in respective order or to insert values into the output String.

list of console format specifiers and respective outputs

Console Specifier     Output 
 %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

For Example run this line in console:

const text = "This is a default font style";

console.log("%c" + text,"color: blue; font-size: 20px");
console.log("Hi %s, my name is %s", 'world', 'Joe',);
console.log(
'Hello %cAlligator%c!',
'color: #008f68; font-weight: bold; font-size: 2rem; text-shadow: 0 0 5px rgba(0,0,0,0.2);',
'color: hotpink; font-weight: bold; font-size: 2rem; text-shadow: 0 0 5px rgba(0,0,0,0.2);'
);

var a = [34, 203, 3, 746, 200, 984, 198, 764, 9];
console.log('myFunc(%o)', a);


console.log('%c' + text, 'font-weight: bold; font-size: 50px;color: red; text-shadow: 3px 3px 0 rgb(217,31,38) , 6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) , 15px 15px 0 rgb(2,135,206) , 18px 18px 0 rgb(4,77,145) , 21px 21px 0 rgb(42,21,113)');

To learn more about this check the official documentation.

user_22147890
Related