Tutorial: Getting Creative with Console Statements

24 Dec 2018 9:00am, by

Hey, kids! Have you ever popped open dev tools on a site like Facebook, out of idle curiosity just checking what’s inside… and found a colorful message waiting for you in console?

Facebook instituted this now kinda famous console warning a few years back, in response to a massive phishing scam. Unsuspecting users were led to open the console in their browser and copy/paste in a set of JavaScript commands that exposed their user info. Posting a stern “here be dragons” warning wasn’t enough, and so Facebook decided to go further and effectively disable user ability to execute console commands. Many other sites — like Netflix, Discord, and eBay — went on to do the same thing shortly after. Preventing console executions is not what actually what we are here to talk about today, but if you would like to see the code for disabling the console yourself, it’s here.

What we are here to talk about is styling your console messages. What you say is all up to you, but this tutorial will show you how to make things shiny and bright using CSS attributes to bring a bit of flash to your console stash.

Why would we want to do this? The main reason is that it’s just plain cool. A fun way for devs to shout out to other devs, even, since we are most likely the only ones even looking under the browser’s hood. Case in point: tech companies now leverage the console as a talent recruitment/hiring tool. Hit command+option+j on the, and Reddit sites —  among many others — and you will find a dev-friendly greeting complete with a click-through link to their jobs page.

In the event you ever do have to explain or justify your arty actions to anyone in a position of authority, you can make the point that it’s also a functional, even useful, thing to do. In any web app that prints out a mad cascade of logs in the browser console, styling your log message will help ensure that important doesn’t get buried in the landslide, never to be seen again ever. It’s a legit debugging aid, so there! If your boss still gives you flak, well, there’s plenty o’ job offers in them thar console windows…

So how do we do the thing?

Stand back, I’m going to %c

The key to pimping your console output is a weird but fun mashup of JavaScript and CSS: the “%c” specifier.

Basically, %c is a JS placeholder that gets paired with a second parameter, which consists of CSS attributes. The outcome applies CSS style rules to the output string and logs it to console.

We are essentially telling the compiler, ‘Take this thing here. Now make it blue/bigger/bold/etc.” Whatever styling your little heart desires… So long of course that it is supported by CSS3.

It works like this:

  1. First, pass in your chosen text string as the first parameter in the format of ‘%cMy string here’  — you can type anything you want, of any length. It will render so long as you remember to begin the string with “%c” and open and close the statement with quote marks.  So, in our example, the first parameter is ‘%cHello World!’.
  2. Now, again in quote marks, pass in the all style(s) you desire to apply to your text. We will start off simple and just change the font and background colors: ‘color: darkseagreen; background: darkslateblue’).

Color, font, size, background  — if you can do it in CSS, you can do it in the console!

Let’s make it even fancier by making it bigger and changing the font:

There are a few rules, all familiar if you’ve spent even a little time toiling in the front-end developer trenches:

  • Colors can be expressed as hex values (a ‘3” followed by a six-character alphanumeric identifier code. White is #ffffff, for example; our example color DarkSlateBlue is #483D8B).
  • Colors can also (and probably most reliably) be rendered as one of the 140 built-in CSS colors. These you just call out by name: DarkSlateBlue. Firebrick. Chartreuse. (There’s also of course black, white, and about a dozen varying shades of gray…but we are supposed to be getting fancy, here, yes?). Writing out these names is case-insensitive, but I typically use camel case for better readability.
  • All CSS font styling properties are available for you to play with: size, weight, font family, etc.
  • As for the fonts themselves, you can call these out by name to change from the default sans-serif console font. There are five built-in fonts that all browsers are guaranteed to recognize and support: serif, sans-serif, monospace, cursive and fantasy.
  • There are also other common fonts that are just about as universally supported and safe: Arial, Helvetica, Verdana, Times New Roman. Chrome appears to support a good number of other library fonts, too, so have some fun with Trebuchet or Optima.
  • Chain as many styles together as you like; just remember, each CSS property/value style pair must be separated from the next inline style declaration with a semicolon. Until you get to the end; unlike either CSS or JS, the last style declaration ends with the quote mark and NO semicolon.

N.B.: Though “console.log()” is the best known and most often used, there are actually five forms of console messages. The others are “console.error()” — which of course you hope to never see  — plus “console.debug()”, “console.warn()” and “console.error()”. No matter the variety of message, though, they all can be styled exactly the same way.

One Message, Many Styles

If you want to change styles mid-stream within the same text string, it’s as easy as inserting a fresh “%c” in front of the word where you want the new style to take effect:

This works because we are essentially passing in a new parameter for each new instance of %c in our text.

CSS Styles as JS Array

If you’re really painting yourself a console.log() masterwork, your in-line style args can grow pretty lengthy. Applying a bit o’ JavaScript to the mix can organize things nicely. The trick is to pass your styles into your log statement as an array, and then use the join() method to convert them into a string.

1. Create an array variable to hold all the CSS style properties you wish to apply:

2. Append join(‘;’) to the end of the array variable:

3. Pass the variable into console.log() along with whatever message you are sending to the world. Don’t forget to start it with %c and enclose the whole thing in quotes:

Using join() with a semicolon argument tells the method to take the array and turn it into a single string where each element is separated by a semicolon — which is of course required for our JS %c style syntax.

Emoji in Your Console

Emojis?  Now you’re really getting silly. But, again, utility: It’s far easier to pick an emoji out of a list than a random string of text. That skim-ability can lead to real productivity gains. Plus when it comes to code comments, whoever really reads those anyway? Adding an eye-catching emoji icon means people might actually pause and peruse your important thought.

The *safest* way to summon emojis into your code is via Unicode and the String.fromCodePoint() method. hosts a comprehensive list of all available Unicode emojis  — there are currently 1,644. So, yeah, pretty much any concept you can imagine is represented via tiny ‘toon icon. Beware, however, that not all of them are supported in the browser you will need to find workarounds for a few familiar favorites, like the brain icon and the barfing face.

Each emoji has a unique six-digit identifier code that you pass into the .fromCodePoint() to save and then render it. For example, the thinking face emoji ? is 1F914. In order to for the compiler to render the Unicode, though, you need to put 0x in front of it.

Unfortunately, there is no current way I can find to treat them as just another text character, meaning there is no way to apply styles to them.  Browser support for emojis is surprisingly primitive at this point. You can, however, use string template literals, the new-ish ES6 feature that allows embedding variables in text strings. (See this tutorial for more on using string literals in JavaScript).

If you’re just wanting to put emojis in your comments, rather than inserting them into say a string that is getting generated as part of a log, you’re safe to just drag and drop from the built-in keyboard on your computer. For Mac users, that would be control + command + spacebar, then click the one you want and drag to your console.

It also works to drag into your console.log statements, but again I’ve heard reports of weird bugs and crashes introduced by encoding issues, so to be safe: in non-commented/live code, Unicode that sucker.

Now get out there and have some creative, colorful fun in console!

Banner for feature art via Pixabay.

A newsletter digest of the week’s most important stories & analyses.