Did you ever wish to make an error (or warning) message appear so big in the web browser’s developer tools that the unsuspecting victim who opens the console will be scarred for life?
Fear not, we all wanted to do that, and you can do it very easy. How, you might ask? Using CSS styles inside the console.log() function, of course.
The basic usage of the function is console.log(‘This is a message!’) but by using %c-style substitutions you can apply any CSS styles you can think of to the log message.
For example if you want the message to be really really big:
console.log("%cThis text will be quite big.", “font-size:30px”) Result:
Or, if you want the text to be white on red background: console.log("%cThis text will be white on red background.", “color:#fff;background-color:#f00”) Result:
Or, if you want the text to be big, white on a red to green gradient background: console.log("%cThis text will be big, white on a red to green gradient background.", “font-size:20px;color:#fff;background:linear-gradient(to right, red,green)”) Result:
You can even add multiple %c to style different parts of the message in a useless way. console.log("%cRed, %cGreen, %cBlue, %cBig", “color:#f00”, “color:#0f0”, “color:#00f”, “font-size:20px”) Result:
Nifty, heh?