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?
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 iCloud.com, BBC.com 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
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:
console.log('%cHello World!', 'color: darkseagreen;’);
- 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!’.
- 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
1. Create an array variable to hold all the CSS style properties you wish to apply:
const style1 = [ 'color: powderBlue', 'text-shadow: 2px 2px purple', 'background: plum', 'font-size: 3em', 'border: 1px solid purple', 'padding: 20px', 'font-family: fantasy' ];
2. Append join(‘;’) to the end of the array variable:
const style1 = [ ...styles here... ].join(';');
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:
console.log('%cWelcome Home!', style1);
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. Unicode.org 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.
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.