Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 28, 2020 07:11 pm GMT

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 thats 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


Original Link: https://dev.to/sanchithasharma/make-your-console-messages-colorful-5h9o

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To