CSS styles and console.log()

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:

console.log("%cThis text will be white on red background.", "color:#fff;background-color:#f00")

Result:

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:

console.log("%cRed, %cGreen, %cBlue, %cBig", "color:#f00", "color:#0f0", "color:#00f", "font-size:20px")

Result:

Nifty, heh?