Chrome console table add colors

Question

This is an example of how we can log in chrome dev tools with colors:

console.log('%c test1 ', 'background: black; color: green')

I was wondering whether we can log with table and colors and the same time ?

Answer 1

There's no styling capabilities on the console.table function, as per the Console API.

However, I was able to come up with a really hacky solution for styling a console.log statement as if it were a table. This is probably not going to be good enough, but it was pretty fun to make.

There were many limitations, like not being able to set the width and height properties. My workaround was to pad the text with spaces to match the longest property name/value.

(function() {
    function getProperties(obj) {
        var props = [];

        for (var prop in obj) {
            if (obj.hasOwnProperty(prop)) {
                props.push(prop);
            }
        }

        return props;
    }

    function getLongestTextLength(objArray) {
        var longest = 0;

        for (var obj of objArray) {
            for (var prop in obj) {
                if (obj.hasOwnProperty(prop)) {
                    var length = Math.max(prop.length, obj[prop].length);
                    if (length > longest) longest = length;
                }
            }
        }

        return longest;
    }

    console.fancyTable = function(objArray) {
        var objProto = objArray[0];
        var args = [];
        var header = '';

        var baseStyles = 'padding: 2px; line-height: 18px;';
        var baseBorders = 'border-top: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid black; '
        var headerStyles = baseStyles + baseBorders + 'font-weight: bold; background: lightcoral;';
        var lastHeaderStyles = baseStyles + 'font-weight: bold; border: 1px solid black; background: lightcoral;';
        var rowStyles = baseStyles + baseBorders + 'background: lightblue;'
        var lastRowStyles = baseStyles + 'border: 1px solid black;  background: lightblue;'

        var props = getProperties(objProto);
        var longestTextLength = getLongestTextLength(objArray);

        for (var i = 0; i < props.length; i++) {
            var prop = props[i];

            while (prop.length < longestTextLength) {
                prop += ' ';
            }

            header += '%c' + prop + ' ';

            if (i === props.length - 1) {
                args.push(lastHeaderStyles);
            } else {
                args.push(headerStyles);
            }
        }

        for (var i = 0; i < objArray.length; i++) {
            var obj = objArray[i];

             header += '%c\n';
             args.push('');

            for (var j = 0; j < props.length; j++) {
                var val = obj[props[j]];

                while (val.length < longestTextLength) {
                    val += ' ';
                }

                header += '%c' + val + ' ';

                if (j === props.length - 1) {
                    args.push(lastRowStyles);
                } else {
                    args.push(rowStyles);
                }
            }
        }

        args.unshift(header);
        console.log.apply(this, args);
    }
})();


function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}

// create some test objects
var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

var peopleToLog = [john, jane, emily];

console.fancyTable(peopleToLog);

I'll make some improvements if I can, and perhaps publish it for the giggles.