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: yellow;");
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 %cdirective 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
- outline and its longhand equivalents
- clear and float
- text-* properties such as text-transform
- word-spacing and word-break
- background and its longhand equivalents
- border and its longhand equivalents
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;
That's is how you can make your console output look nice and keep learning and improving your skills.
For More Switch Here.