Add CSS to console logs

Having lots of console.log() statements in your JavaScript (while you're in dev mode of course, remove them in production!) your console can quickly become cluttered and all the logs can start looking the same.

You can add CSS to your console logs be simply adding the color flag %c before the logged message and passing a string of CSS as the second argument.

console.log('%c Hello World!', 'font-size:3em; background: #073642; color: #EEE');

console colours 1024x684

This can be a useful when you need to highlight key bits of information in your console to make your debugging easier.

That's me!

I’m Ajay Karwal. I write about my experiences as a front-end developer. If you enjoy my content, please consider supporting what I do.

Become a PatronBuy me a coffee