The console.log output can be styled using the CSS format specifier. Also we can manipulate console.log output colors and fonts. Even we can give border, padding or add an image in the console.

The console plays an important role in the development process. When using consoles, we can use for logging the statements to check if our code reached the given loop, or may be if we want to print the API response to know the exact response and then write the code for the same. Going into more deeper insights about the blog, which is styling the console statements.

The other day I saw the medium.com website and I was checking something, when I saw that they have something different in the console. They got some different fonts in the console, which took me forward in learning more about the same and finally this blog.

Lets dive in,

This are CSS format specifiers which are used to specify the kind of formatting that should apply to the value.

%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

Lets get into some examples to understand this more clearly,

console.log("%cHi there", "color:red");

This console statement will print the text “Hi there” with the css “color:red”. i.e. in red color. So, this is how, it is used. Going more into this, we can add any css we want, may be font-size, font-type etc.

console.log("%cHi there", "color:red; font-family:serif; font-size:20px");

Lets go, dive more. Now, with CSS we can do anything. How? Lets try adding background-color and padding.

console.log("%cHi there", "background:red; color:white; font-family:serif; font-size:20px; padding:10px");console.log("%cHi there", "color:red; font-family:serif; font-size:20px");

Now, lets try adding an image in the console. Yes, this is also possible. Lets see.

console.log("%cWELCOME","display: inline-block ; background-image: url('https://mayankkhanna.in/assets/mk.png');" + "background-size: cover ; padding: 10px 175px 200px 10px ; " +"border: 2px solid white ; font-size: 11px ; line-height: 11px ; ");

Endless possibilites, Try something else and also post in the comments.