Using console.log for print debugging is my bread and butter 🍞🧈 and I can’t do without it.
Let’s imagine for a second that I am developing a website for one of my favorite companies in the world:

Like any other big and successful website, The Console tab shows a lot of “noise”. and I can’t find what I’m looking for…
Wouldn’t it be nice if I could add some colors to my print debugging? 🤔
It would! and I can!
It does not seem to be officially documented, and I am guessing this is because it is not supported yet in all browsers so it did not mature yet to be included as standard. However, it is explained here how to do it and it works fine for me in both Chrome and Visual Studio Code “out of the box” with no need for any plugins:

How to do it
Just add a %c before the printed TEXT and a CSS statement as an additional argument:

<h1>My LEGO Website</h1>
<script>
console.log('%c On initalization', 'background: green; color: white; display: block;');
</script>Final Thoughts
This small and simple feature can boost my debugging time → which will shorten my development effort →which will improve the chances for me to deliver on time. 👊🏽

