Logging data with the console API is a common practice. As your application grows, the console can become cluttered and hard to read, making it easy to miss important messages. In Chromium-based browsers (and possibly others), you can style your log output using CSS, allowing you to change the color, background, font size, and more.
Use %c in the message string and provide the CSS styles as additional arguments.
Here are some examples:
JavaScript
console.log('%c Message with color', 'background: red; color: white;');
JavaScript
console.log('%cMessage with %ccolor', 'color: blue;', 'color: red;');
JavaScript
console.log('%cMessage with %cdifferent sizes', 'color: blue;', 'color: red; font-size:20px');
Don't overuse this trick if you don't want to transform your console into a Picasso!
Do you have a question or a suggestion about this post? Contact me!
