Colorful JavaScript console output

JavaScript console can be a lot more fun than you’ve expected. Of course everyone knows about the difference between console log, info, error & warn but here I’ll talk a bit about styling and coloring the simple log message.
In current versions of Chrome and Firefox you can add css to your console.log message:

console.log('%c this is red text', 'color: red; font-weight: bold; display: block;');

And the result:

Console.log with color, CSS
Console.log with color, CSS and JS

And here is a text with colorful background:

console.log('%c this text has blue background', 'background: blue; font-weight: bold; color: pink; display: block;');

And the text with the blue background with Mozilla JS console output with colors

For more details on this you can consult the Chrome console API
https://developers.google.com/web/tools/chrome-devtools/console/
https://developers.google.com/web/tools/chrome-devtools/console/console-reference

Leave a Reply

Your email address will not be published. Required fields are marked *