An Interest In:
Web News this Week
- February 29, 2024
- February 28, 2024
- February 27, 2024
- February 26, 2024
- February 25, 2024
- February 24, 2024
- February 23, 2024
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 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
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To