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.
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!
A simple example:
console.log('%c Do not hold the wrong end of a chainsaw ',
'font-size: 4em; font-style: italic; background: #3fae47; color: white');
Taking it a bit further we can even apply different styles on same line:
console.log('%cDo not hold the %cwrong%c end of a %cchainsaw%c',
For The True Artists
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:
Or even this:
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.