And while more than likely you are used to seeing this when you fire it up:
Many developers don't realize that you can actually style the console with a select number of CSS properties.
Here is the current list of supported properties that you can use in your console.log's.
- clear and float
- word-spacing / word-break
This list is prone to change of course and might not behave as expected
depending on how complex your style rules are and the browser that you are using.
Why style the console?
You might be wondering why anyone would even consider styling the console terminal. It's a great question that ran through my mind as well. And after much consideration, I realized that the answer really depends on just how complex your project actually is.
But if you are working with a 10,000 line script that pulls data from 20 different sources and is bound to 100 different templates, then you might find huge benefit in actually having a well-crafted output window. At least while you are in development mode.
How to implement
In order to include a style, you will need to use the %c directive in your console message string as follows:
console.log('This is normal and %cThis is styled', 'background:gold;color:black');
Which would render the following in FireFox:
Note that only the content right after (to the right) of the directive
will receive the given style rules.
You can also include multiple style rules by simply adding sequential %c directives to your messages and including multiple CSS segments to the argument list.
console.log('This is normal and %cThis is styled. %cThis is the second style. %cAnd this is the third', 'background:gold;color:black', 'background:dodgerblue;color:white', 'background: mediumpurple;color:white');
That would produce the following output:
If you need to clear the style rules and transition back to standard output, you can add a c% directive that has no corresponding style properties.
You can essentially add as many different style rules to each message as you'd like. However, because the styling is based on the ordinal position of the CSS arguments, this can very quickly become difficult to read and follow.
Let's not be shocked here, but there are limitations with just how well styled output renders in the console window.
Here's an example of me going to town on a message:
It's surprisingly not bad. The font-family came through just fine when using any global fonts, such as Arial. However, using something like Google Fonts seems to have no effect on the output.
You can also see that the box-shadow rendered just fine, which is actually a bit shocking considering how much animation and paint work goes into making a shadow.
Regardless of the slight glitches however, it's pretty interesting to see just how much the console window has evolved during the past several years.
Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.