DevTools: I See Your True Colors

Today I’m going to discuss a neat feature which on the its surface might seem completely useless, however when used wisely it is an effective tool with several strong use cases.

I can’t imagine a web developer who’s not familiar with the famous browser console. It is widely used to examine unhandled exceptions that might occur in runtime (not in the code you wrote of course), print out some useful logs for debugging, run quick JavaScript experiments or fine-tune CSS selectors.

However most of the time our logs are monotonous and boring, which is why I’m sure you’d be happy to learn there’s a way to spice things up with styled console logs. Yep, you heard right!

console.log('%c Do not hold the wrong end of a chainsaw ', 
  'font-size: 4em; font-style: italic; background: #3fae47; color: white');

console.log('%cDo not hold the %cwrong%c end of a %cchainsaw%c', 
  'font-size:3em;', 
  'font-size:3em;font-weight:bold;text-decoration:underline;color:orange', 
  'font-weight:normal;font-size:3em', 
  'color:black;font-size:4em;color:red;font-style:italic;font-weight:bold;', 
  'color:black');

Then there are those of us who are actually artists stuck forever in a web developer’s body. Obviously a more robust approach is needed, which is where libraries/scripts like color.style come into play and allows things like:

Albeit seemingly completely useless perhaps only good for impressing your developer friends, turns out it actually has true value when smartly used.

One excellent use-case is attracting good web developers (the curious type) to your team, as you can see below Pinterest and toggl.com are doing. Another great example is Facebook’s console log warning for protecting non tech-savvy users from social-hacking, also below.

You know the drill, so let’s make it quick: Internet Exploder – Not Supported.

Code and prosper!

Zacky.