Styling console.log() Output Formatting With CSS
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.
Fun fact, those formatting and string substition features were first implemented in Firebug, see https://web.archive.org/web/20170119022729/http://getfirebug.com/wiki/index.php/Console.log.
Why I know that? Because I helped implementing these features back then. :-D
And they are still very helpful, but unfortunately also really hidden.
Oh man, Firebug changed my life! Heck, I think Firebug changed the industry. Before that, it was all
alert( value )calls all over the place. Even "FirebugLite" for IE was not bad. It must be something amazing to have contributed to something that left such an impact on the world. Nicely done!!
thank you for the kind words! I can just give the compliments back. With your tips you reach many people all around the world. Especially regarding CF questions, almost all web searches lead to your website. :-)
And it's always good to get to know about specific little features like the features of
console.log()and Co., which you may not easily find out about, otherwise. So, keep up the great work!
One little tip from my side regarding console logging, for debugging you don't even need to add
console.log()s to your site, as the Chrome and Firefox DevTools support so called "logpoints", see https://developers.google.com/web/updates/2019/01/devtools#logpoints and https://developer.mozilla.org/en-US/docs/Tools/Debugger/Set_a_logpoint.
Very cool! And for grins, I looked into whether node.js could do this with output going to a terminal window. It turns out that node.js does it differently in either of 2 ways: escape sequences and the "colors" package. Here's a link to a good article explaining all this in case anyone is curious: https://www.voidcanvas.com/make-console-log-output-colorful-and-stylish-in-browser-node/
Easily amusedly yours,
This post made me really nostalgic about an npm package called Chalk, which allows for styled output on the Terminal in Node.js. I wanted to follow-up this post, to see if I could create a Chalk-inspired set of chainable stylers off my
It was, more or less, my first real use of the
Proxyclass in ES6. Was lots of fun!
OOooh snap! That's awesome. The Chrome Dev Tools are just bonkers. I've used the debugger and break-points, but never noticed this option. Thanks for the hot tip!
When I dip into the Node.js world - which isn't so often as of late - I used to love a module called
Chalk. I believe that Chalk is doing that "escape sequence" stuff you mention (and is discussed in your linked article). You're timing is actually quite good as I was just thinking about Chalk this morning (and wrote a follow-up post). Chalk's API was so silky smooth and enjoyable.
LOL. I'll go check that out now. :-)
Ha ha, I hope you enjoy :D
Yeeeeeez! It totally is one of the most influential and industry changing tools ever!
Right?! I was a Firefox superfan for a long time because of it.
Post A Comment — ❤️ I'd Love To Hear From You! ❤️
Post a Comment →