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 …


This content originally appeared on DEV Community and was authored by CoderZ90

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;");

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


This content originally appeared on DEV Community and was authored by CoderZ90


Print Share Comment Cite Upload Translate Updates
APA

CoderZ90 | Sciencx (2021-10-15T07:21:05+00:00) Styling – Console.log. Retrieved from https://www.scien.cx/2021/10/15/styling-console-log/

MLA
" » Styling – Console.log." CoderZ90 | Sciencx - Friday October 15, 2021, https://www.scien.cx/2021/10/15/styling-console-log/
HARVARD
CoderZ90 | Sciencx Friday October 15, 2021 » Styling – Console.log., viewed ,<https://www.scien.cx/2021/10/15/styling-console-log/>
VANCOUVER
CoderZ90 | Sciencx - » Styling – Console.log. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/15/styling-console-log/
CHICAGO
" » Styling – Console.log." CoderZ90 | Sciencx - Accessed . https://www.scien.cx/2021/10/15/styling-console-log/
IEEE
" » Styling – Console.log." CoderZ90 | Sciencx [Online]. Available: https://www.scien.cx/2021/10/15/styling-console-log/. [Accessed: ]
rf:citation
» Styling – Console.log | CoderZ90 | Sciencx | https://www.scien.cx/2021/10/15/styling-console-log/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.