https://www.bennadel.com/blog/3941-styling-console-log-output-formatting-with-css.htm#blog-post

Ben Nadel at CFUNITED 2010 (Landsdown, VA) with: Gabriel De La O

« Previous Photo

Next Photo »

I use console.log() all day, every day. But, I almost always forget that you can use CSS to style the formatting of the console output. As such, I wanted to sit down and write out some console.log() styling examples in an attempt to hammer this information into my caveman brain. Also, it's hump day and I thought this would be a nice little mental palette cleanser.

Run this demo in my JavaScript Demos project on GitHub.

View this code in my JavaScript Demos project on GitHub.

If you look at the Mozilla Developer docs for Console, you'll see that the Console object supports some nifty features like string substitution and CSS styling. Both of these features work by using a special token inside the first console.log() argument followed by a series of subsequent arguments that are used to modify the first argument.

So, for example, we can interpolate an Object using %o like this:

console.log( "My document: %o", document );

And, we can style that same log statement using %c like this:

console.log( "%cMy document: %o", "color: red ;", document );

Notice that the second and third parameters are used to modify the %c and %o respectively. In this case, the color: red affects everything that follows the %c.

With that said, let's have some fun with this and see what it can do:

As you can see, we're just trying to throw a lot of CSS at the various console.log() statements to see what they support. And, when we run the above code in Chrome, we get the following developer tools output:

How freaking cool is that! Firefox also supports this; though, Firefox does not appear to support background-image.

Now, this is really cool; but, it's super verbose. What would be really cool is if we packaged this functionality up into something that hides away the complexity of the CSS while still providing the flexibility of console.log(). Luckily, JavaScript is an intensively powerful language. And, wrapping this up isn't actually all that complicated.