🎨 Colorful console.log

Ido
Ido
Nov 8 · 2 min read

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:

lego.com

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:

Colorful

How to do it

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

The code for My LEGO Website
<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. 👊🏽

Ido

Written by

Ido

System Design. Architecture. Infrastructure. System Analysis. Projects management Speaker. People Motivator.

idomongo

idomongo

Mostly on MongoDB

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade