Stylish Logs
Level: Intermediate
Normally when you log text to the console using something like console.log(), the effect is simple, boring, and unimpressive. You might log a data type that is represented a little differently, like an HTML element or an object, but in the end, there’s no real flair.
Thankfully, the console API allows us to add that missing flair by providing ways to style the output of the console. This works through style substitutions that allow you to inject CSS styles directly into your logged messages. Simply include a %c in your logged message, and follow that with an argument that contains the style. The style will be injected in the location of the %c styling the text in the message that follows. This can even be done multiple times for multiple styles in a single message.
console.log('%cRed text', 'color: red');
console.log('%cRed text %cBlue text', 'color: red', 'color: blue');
console.log('%cLarge text', 'font-size: x-large');
console.log('Normal - %cWhite on black%c - Normal',
'color: white; background-color: black', '');
Not all styles are supported and support in different console APIs/browsers may also vary. You may need to do some experimentation to see what works and what doesn’t.
More info:
