Style up your console.logs

This is nothing new, but something I only recently started doing. Ya know those console.logs you’re using in your JavaScript code? Did you know you can style them in the dev toolbar?

YA! In both your browser console and nodejs!

Styling the browser console

It’s really that simple! Throw a %c in your console.log message, and then after the message, put your typical CSS. Try it, open dev toolbar right now, copy and paste in this:

console.log('%cStyling is %cfun','color: #00ff33; font-size: 14px','text-transform:uppercase; font-size: 16px; color: #ff33dd')

I’ve used this in a few different places, and will continue to do so. Some examples:

• console.error already formats your errors in all red. Add to it! Works the same way: console.error('%cyour message', 'your css')

• Building with a library like RxJs, I will use console.log to write out the data being received, in bright green, so I can find it quickly.

• You could instruct your users if they ever ended up in the dev toolbar. Sometimes we will ask them to open it if we’re troubleshooting, but what if they explore on their own? Have you tried it on Facebook?
  

Virtually anything you can do with CSS you can do in your console. The only big difference I see so far, is that the CSS doesn’t cascade to the following CSS. As soon as you specify another %c, it starts fresh, you have to bring in all of the same CSS if you want some of the styles to carry over. Might I suggest using some variables to manage your CSS in here, as writing these long console.log statements won’t be fun.

Styling NodeJS output

Sadly, the same thing doesn’t work, exactly. Since node is running in a terminal, it’s not running in a browser that understands CSS, so I guess it makes sense. Instead, we can change colors of the text through some odd looking characters: \x1b[31m makes the text red. Let’s have some fun, here’s a block of js code to run in node:

console.log('\nI\'m the normal output')
console.log('\x1b[31mAnd now I\'m red!')
console.log('Shoot, why am I still red?')
console.log('I need to \x1b[0mreset my console to get back to normal')
console.log('Colors \x1b[32mcan \x1b[33mchange \x1b[35min \x1b[36mthe \x1b[34msame \x1b[0mlog')
console.log('\x1b[1mBRIGHT colors \x1b[32mare \x1b[33mbolded \x1b[35mand \x1b[36mbrighter \x1b[0m')
console.log('\x1b[2mDIM colors \x1b[32mare \x1b[33mdarker \x1b[0m')
console.log('and of course, \x1b[41mwe have \x1b[30m\x1b[43mbackground colors\x1b[0m')
console.log('\x1b[7mReverse \x1b[32mswap \x1b[33mforeground \x1b[35mand \x1b[36mbackground\x1b[0m')
console.log('\x1b[8m\x1b[41mthis text \x1b[43mis hidden \x1b[42mbut the background\x1b[42m still comes \x1b[45mthrough\x1b[0m')
console.log('\x1b[4mgetting fancy with underlines \x1b[30m\x1b[3m\x1b[105mand italics\x1b[0m')

This outputs to something hideous, but you get the point:

The gotcha here, as you see in my 4th line, is to reset the style. The styles are being applied to the terminal window, so anything after it, printed by your console.log or another library or app, will remain with that style. In order to reset it we use \x1b[0m, which you’ll see throughout the codeblock above.

Here’s a slightly cleaner list of what’s possible:

Check out this helpful wikipedia post on the colors: https://en.wikipedia.org/wiki/ANSI_escape_code#Colors.

Have some fun with it! Let me know how you use it! I think this is a capability that is well underused and can provide some good use for us developers.

Interested in receiving content like this right in your inbox, subscribe below!