An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
June 25, 2021 01:44 am GMT
Original Link: https://dev.to/bearevans/create-horrible-console-messages-with-css-4ob1
Create Horrible Console Messages with CSS
Are you tired of reading debug messages featuring the same Courier New 10px font over and over again? Do you want to color code your error messages or console logs by code block? Do you want to remind people inspecting your web app of the lawless days of Myspace?
Well now you can.
Most modern browsers support styling console messages with CSS. All you have to do is prefix your message with %c and pass whatever styling you want as a second argument.
console.log("This is a normal message.");console.log( "%cThis message is big and scary!", "color: red; background-color: black; font-size: 16px");console.log("This message is not.");
For example, the above code results in the following output.
You can even define styling in variables and use template literals.
const style = ` color:white; background: linear-gradient(312deg, rgba(255,0,0,1) 0%, rgba(241,255,0,1) 15%, rgba(0,255,12,1) 30%, rgba(0,254,255,1) 43%, rgba(0,1,255,1) 59%, rgba(250,0,253,1) 88%, rgba(255,0,0,1) 100%); border: 1px solid white; padding: 5px; font-family: "Comic Sans MS"; font-size: 16px;`;console.error( `%c An error has occurred. Everything is ruined forever. `, `${style}`);
It really helps soften the blow, dont you think?
Original Link: https://dev.to/bearevans/create-horrible-console-messages-with-css-4ob1
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To