DEV Community

Bear Evans
Bear Evans

Posted on • Originally published at bearevans.wordpress.com

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.");
Enter fullscreen mode Exit fullscreen mode

For example, the above code results in the following output.

Big Scary Console Message

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}`
);
Enter fullscreen mode Exit fullscreen mode

Rainbow Colored Error Message

It really helps soften the blow, don’t you think?

Top comments (4)

Collapse
 
amittraspal profile image
amittras-pal

Yeah, it sure softens the blow.

Maybe not the rainbow gradient, but it's a good thing to know. 🀣

Collapse
 
nightdvlpr_50 profile image
Amir • Edited

I've published a tiny package about this topic.
npmjs.com/package/havecoolconsole

Collapse
 
rajeshroyal profile image
Rajesh Royal

πŸ‘πŸ“ŒπŸ“Œ

Collapse
 
timbauwens profile image
Tim

Love it!!