Putting up the Christmas Decorators

Dec 16, 2019

It's that time of year again, and you know what that means. You get to dig deep into (local) storage, find the Christmas decorators, setup the Strings of lights and ornaments, setup the (DOM) tree, and of course, style your console logs.  You were planning to bring Christmas to your home right?

Let's get those console logs of yours spruced (🎄) up.

TLDR: Paste this random JS script into your browser and hope for the best, or read on for how we styled the console.

Grab the snippet from the Github Gist

It’s Christmas time again. That means setting up your Christmas decorators. Let’s get those console logs of yours spruced up.
It’s Christmas time again. That means setting up your Christmas decorators. Let’s get those console logs of yours spruced up. - christmas-logs.js

/*
  Lets have a little Christmas fun in the console.
  https://GetWisdom.io
*/
(function ChristmasConsole() {
    function getRandEmoji() {
        const EMOJIES = ['🦌🦌🦌', '🎅', '🎄🎄'];
        return EMOJIES[Math.random() * EMOJIES.length | 0];
    }

    function getRandStyle() {
        const randColor = Math.random() > 0.5 ? '#CC172B' : '#0E5818';
        return 'color: ' + randColor + ';';
    }
    const log = window.console.log;
    window.console.log = function() {
        const args = Array.prototype.slice.call(arguments);
        const style = getRandStyle();
        args.push(getRandEmoji());
        if (window.navigator && window.navigator.vendor === 'Google Inc.') {
            var formatting = '';
            const valueArgs = [];
            args.forEach(x => {
                let formatter;
                if (typeof x === 'object') {
                    formatter = '%o ';
                } else if (typeof x === 'number') {
                    formatter = '%c%f ';
                    valueArgs.push('color: blue;');
                } else {
                    formatter = '%c%s ';
                    valueArgs.push(style);
                }
                formatting += formatter;
                valueArgs.push(x);
            });
            return log.apply(window.console, [].concat([formatting], valueArgs));
        } else {
            return log.apply(window.console, args);
        }
    }
}());

Try out your new spruced up logs now in the console:

console.log('\tIt\'s Christmas Time!');
console.log('\tTime to take out the decorations');
console.log('\tReady to decorate your home?');
console.log('\tAnd of course, your home is the console, right?');

What's going on?

Under the covers, console.log utilises built-in formatters for us:

%s String formatter
%f Number formatter
%o Object formatter
%c CSS formatter

console.log('%chello world', 'color: red; background: green;');

The first string parameter is the formatting string. The rest of the parameters should be values to be formatted, or the inline CSS styles. Heads up, only a minimal set of basic CSS is supported.

Chrome + Firefox Properties
background
border
border-radius
box-shadow
color
cursor
display
font
line-height
margin
outline
padding
whitespace
word-spacing
word-break
writing-mode

Putting these formatters to work together with some monkey patching and you've got yourself some Christmas Spirit.


He's making a list, and logging it twice. Santa Clause is logging in production because he knows uptime is critical.  If you you've enjoyed Christmas logs, you'll love Wisdom's logs. Wisdom logs application state alongside user actions and HTML changes ("session replay") to debug known bugs, and explore around for new bugs.  Redux action and state alongside your rage clicks and network requests.

Wisdom

The developers behind Wisdom, building amazing dev tools for web apps. We're logging every rage click, console log, network request, and stack trace, and redux action— with HTML replay.