Make your console messages colorful

Got a big list of bugs and bored of debugging? Here are the few tips that makes your life easy that add spice and sunshine to your console messages.

We can use %c directive to apply a CSS style to console output. And here are few ways how it is done.

NOTE : Paste the below console commands in your console window

console.log('%c Get Riggity Riggity Wrecked Son', 'color: white; background: pink; font-size: 20px')

Add the %c directive as a prefix to the part of the string you want to add style to.
The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.

Multiple styles in one console message:

We can add the multiple styles to the multiple strings in the same console command.

console.log("%cIM " + "%cPOSSIBLE", "color: purple; background: pink", "color: yellow; background: black")

Styling the error and warning messages:

One can change the styling of the error message and warnings too.

console.error('%cWubba Lubba Dub Dub!', 'color: whitesmoke; background: black')
console.warn('%c...To Live Is To Risk It All...', 'color: green; font-size: large')

Push the styles to an array :

We can pass the styles in the array and join it to make a string when we have too many strings.

var styles = [
    'background: linear-gradient(green, #571402)'
    , 'color: white'
    , 'display: block'
    , 'line-height: 40px'
    , 'text-align: center'
    , 'font-weight: bold'
].join(';');
console.log('%c The Universe Is Basically An Animal... ', styles);

Using %s directive for string to display and %c to style it:

We can use %s string to pass the string and apply styles to it. And this is how you do it. Assign the string to be printed and the styles to the variables respectively and call those in console command at once.

styles = 'font-weight: bold; font-size: 50px;color: red; text-shadow: 3px 3px 0 rgb(217,31,38) , 6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) '
message = 'Wubba Lubba Dub Dub!'
console.log('%c %s', styles, message)

And that’s all for today.

References:
1) https://developer.mozilla.org/en-US/docs/Web/API/console#Usage
2) https://www.samanthaming.com/tidbits/40-colorful-console-message/
3) https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css