Grateful: Colors in console.log()
blog.jim-nielsen.com ⎯ 2 months ago So there I am, having an issue where my UI state isn't updating correctly. What do I do? What every developer does: turn to console.log() and troubleshoot by logging values.
I have a named color (e.g. blue) and a corresponding HSL color string for that named color (e.g. 100 50% 0%). I log those in the click handler function where I expect the color to change.
onClick={() => {
// Some stuff...
console.log(
`theme change: ${colorName} ${colorHslString}`
)
}
Then I go click around in the UI and observe the bug. The problem is, when I look at the console to see if what the UI is doing matches what the code is doing, it's impossible to tell. The values are indiscernible because I can't read HSL.
Do you know if 262.1 83.3% 57.8% is "violet" off the top of your head? Well I don't.
Then this vague memory hits me: can't you log something to the console with a bit of color? Sure enough, I find a reference in my notes!
So I update my console.log() statement to style the log statement the same color value it's logging, making it super easy to visually diff!
console.log(
`%c theme change: ${colorName} ${colorHslString}`,
`color: white; background-color: hsl(${colorHslString})`
);
Now when it says "violet" it should actually paint a color that looks like violet. Here's what debugging looks like under this scenario:
Yes! That's super helpful. I can see the color name being logged doesn't match the color value. That gives me a really good sense for where the bug is.
I look at the code, fix the bug, then go back to the UI and test again:
Boom! It works.
So I'm expressing my gratitude for being able to style console.log statements!
Reply
Email
Mastodon
Twitter
Tags
#grateful
