Tip #12: Augment your browser console logs with CSS

  • — Frontend

  • 1 min. read

  • — 2/16/2023

I built an open-source logging library called leucine that implements what this tip goes over! Check it out if you're interested in a colorful, emoji-first logging experience.

Did you know you can use CSS when using console.log on the browser? That's right, you can change the font color, font size, padding, margin, and more to give your logs a lot more flare.

In this tip I'll just cover how to add CSS (this post would be a lot longer and lot more boring if we went over every possible customization you could make).

To get started, use a console.log like you would normally:

console.log("Wow, this log is using CSS!");

Then, add a %c to the beginning of the thing being logged:

console.log("%cWow, this log is using CSS!");

I know... this is a bit weird, but this %c actually lets you inject CSS.

Next, pass in your CSS as a string as the second parameter to your console.log

console.log("%cWow, this log is using CSS!", "color:red;font-size:24px;font-weight:bold;");

That's it! You'll now have CSS-enabled logging in the browser!

Go crazy with it 😉.

BTW if you're looking for a package that implements this, plus a few logging states, check out my logging library leucine on npm.

Shaun Chander

hey (again), I'm shaun

I'm posting 3 tips on creative web development daily. Subscribe below to to get tips delivered straight into your inbox!