Style Console Output with CSS

You might be playing with Console API in JavaScript if you are a web designer or web developer.

Like me, you might be bored by the output of this console object in your browser dev tools but from now onwards you will not be bored by the console output because in this article I am gonna tell you how you can customize the output of console object in JavaScript using CSS.

There are tons of methods in the console object but we are gonna play with log and all the other methods are the same as this one.

There is a directive (%c) which is used to style our console output with CSS. Anything after this directive will be beautified using those CSS rulesets which you specify.

I don't know about you but I can't wait to play with this.

This is a simple log method of the console object which shows the simple output as usual.

console.log("My Name is Muhammad Muzammil");

Now let's apply some CSS to this simple command.

console.log("My Name is %cMuhammad Muzammil", "color: #ffff; background-color: #8566ff;padding: 2px; border-radius:3px");

After trying the above code you will see something like this in the console tab in dev tools.

My name is Muhammad Muzammil

The second argument of the log method is the value of %c directive & it is the CSS code. As mentioned above the text after %c directive will be beautified only. to beautify complete output apply the directive at the very beginning of the line.

Now your console output is beautified but wait, there are some restrictions that can not be ignored.

You can not use all the rule sets or properties of CSS with this console object but the listed ones can be used.

• font and its longhand equivalents
• line-height
• margin
• outline and its longhand equivalents
• padding
• clear and float
• color
• cursor
• display
• text-* properties such as text-transform
• white-space
• word-spacing and word-break
• writing-mode
• background and its longhand equivalents
• border and its longhand equivalents
• border-radius
• box-decoration-break
• box-shadow

Now here is the extra tip.

The console object renders as an inline element in the console tab to set the properties like margin or padding etc. you need to set display: inline-block;

Wrapping Now:

That's is how you can make your console output look nice and keep learning and improving your skills.