Styling your console log

Found an interesting way from an Chinese website to log the console, normally we do a console.log like this:

console.log('some string')

normally this will just return some boring string “some string” black color, tiny text. What if we want to log multiple results and track which is which etc…
sure we could use separator or other ways, normally I will like this this.

console.log('some string | another string')

this is still boring.
I found this useful method to change this boring stuff, with little trick, we can add css style to the strings.

console.log('%c some string', 'color:red')

you might notice that I added %c with this we could append the styles on the second parameter to the string next to %c, you will see a text with red color, of course we could add more styles to it, like this:

console.log('%c some string', 'color:red; font-size:20px; font-weight:bold;')

ok thats nicer now, and we could also separate different strings into different styles.

console.log('%c some string %c another string', 'color:red; font-size:20px; font-weight:bold;', 'color:green; font-size:20px;')

Hope you enjoy this