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.
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
%o respectively. In this case, the
color: red affects everything that follows the
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
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
To have some fun with this idea, I'm going to create an
echo object as a replacement for
console. Meaning, it will have console-inspired methods like:
And, just like the
console method, these
echo methods will be variadic; meaning, they accept a dynamic number of arguments. The big difference here is that the
echo object will also provide formatting methods that can be used to format one of the inputs to the aforementioned methods:
... which are intended to be used as inputs to the
echo.log( echo.asAlert( "Oh no!" ), "Something went wrong!" );
This would format the
Oh no! portion with "alert styling"; and, leave the
Something went wrong! input as "plain text".
Let's take a look at how this fits together:
The mechanics here are a little hard to pick out immediately. But, basically what is happening is that the "formatting" methods,
asWarning(), are pushing values and CSS onto an internal queue. Then, the
console proxy methods are consolidating that internal queue down into a single
If we run this demo in the Chrome, we get the following developer tools output:
As you can see, this
echo abstraction makes it super easy to seamlessly integrate both styled and unstyled inputs. No need to worry about which argument refers back to which String token - you just wrap your inputs in the various formatters and pass it all the variadic proxy functions.
Anyway, this was mostly a note to self, so I won't go too deep into the weeds here. This was just a lot of fun. And, I hope that by putting some ideas down on paper, so to speak, these features will be top-of-mind when I go to use them next time.
Want to use code from this post? Check out the license.