DEV Community

CoderZ90
CoderZ90

Posted on

Styling - Console.log

Hello ๐Ÿ‘‹ Guys Hope you are safe and happy. so in this blog i will tell you that how you can style console.log using javascript and CSS ๐Ÿ˜Š

Q. Why We Need To Style Console.log And When ?

Ans - You have seen many social media websites such as Facebook or Google Plus, where they have big red text appearing in the console saying "WARNING!" or similar to prevent you from entering malicious code. There are many reasons for styling console.log but the main purpose is to prevent users from entering malicious code in the website ๐Ÿ˜Š

To style console.log follow my steps ๐Ÿ˜Š

When you console something it looks normal and not very cool looking but to style it we need to put "%c" attached to the text

Check this code and if you want to test it just open the dev tools and go to console and then paste the code so that you can see the output...

Code.

console.log("Here comes the text you want to display to the users", "and then put your css styles here to decorate the text");

console.log("%cStyled Text", "color: #fff; background: #000; padding: 12px; font-family: Poppins; font-size: 20px; font-weight: bold;");
Enter fullscreen mode Exit fullscreen mode

Thankyou Guys for giving your time and reading this hope you are safe and Happy...
Also don't forget to subscribe ๐ŸŒŸโšก to my youtube channel

Top comments (3)

Collapse
 
brandonmcconnell profile image
Brandon McConnell

And if you want to see some really wild creations made by styling console.log() check out my console.draw() project here: codepen.io/brandonmcconnell/full/W... ๐Ÿ˜

Collapse
 
official_fire profile image
CoderZ90 • Edited

Wow that is amazing, You made a very great project..

Collapse
 
official_fire profile image
CoderZ90

Hello ๐Ÿ‘‹ Guys hope you are safe and Happy
Also don't forget to subscribe ๐ŸŒŸโšก