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

Comments

[ヘンタイちゃん]

Something I added a while back: Every time I open my console, the top line prints a random colorful greeting message. Fun exercise: make this message depending on the time of the day (Good morning, <username>!)

[Rajasekhar Guptha]

In browser console? How ?

[Kim Hallberg]

Guessing you could use a two-dimensional array where the first is keys that match some time of day. And the sub-array for those keys would be the styles to apply at that time. 🤔

Then you would check the current time when the console executed the command, and use some algorithm to come up with a number corresponding to the first key.
You could probably divide the current time by the length of the time keys or check if a certain key is in the range of the current time but not greater than the next key.

Guessing that would work to an extend.

[Rajasekhar Guptha]

I am asking about.. How to run that program every time we open a console ?

[ヘンタイちゃん]

Depends on your terminal, on Windows using PowerShell you can make these changes permanent by adding your code to the $PROFILE file, whereas on linux you'd need to make these changes in ~/.bashrc.

[Rajasekhar Guptha]

Ok.. Thank you💙

[Karthikeyan]

👌👌👌

[Vijay Singh Khatri]

I tried this in my system to and superb.

Thanks for sharing.