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.
