How to add color and style to the console.log

The developer console in a browser is one of the most valuable tools for any web designer and web developer. Not only does it tell you what's wrong with a web page, but it also allows you run commands and experiment in real-time with both JavaScript and with CSS design.

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.

- background
- border
- border-radius
- box-decoration-break
- box-shadow
- clear and float
- color
- cursor
- display
- font
- line-height
- margin
- outline
- padding
- white-space
- word-spacing / word-break
- writing-mode

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.

If you are running a 20-line JavaScript function that locates a record and outputs it to the screen, odds are that you can skip this fanciful step.

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.

Limitations

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.