DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Sanchithasr
Sanchithasr

Posted on

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')
Enter fullscreen mode Exit fullscreen mode

Output of the above code

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

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')
Enter fullscreen mode Exit fullscreen mode

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

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

Output for the above code

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

Top comments (8)

Collapse
 
hentaichan profile image
γƒ˜γƒ³γ‚Ώγ‚€γ‘γ‚ƒγ‚“

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>!)

Collapse
 
rajasekharguptha profile image
Rajasekhar Guptha

In browser console? How ?

Collapse
 
thinkverse profile image
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.

Thread Thread
 
rajasekharguptha profile image
Rajasekhar Guptha

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

Thread Thread
 
hentaichan profile image
γƒ˜γƒ³γ‚Ώγ‚€γ‘γ‚ƒγ‚“

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.

Thread Thread
 
rajasekharguptha profile image
Rajasekhar Guptha

Ok.. Thank youπŸ’™

Collapse
 
imkarthikeyan profile image
Karthikeyan

πŸ‘ŒπŸ‘ŒπŸ‘Œ

Collapse
 
vijaykhatri96 profile image
Vijay Singh Khatri

I tried this in my system to and superb.

Thanks for sharing.

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post