google-chrome - Chrome 控制台表添加颜色

Question

这是我们如何使用颜色登录 chrome 开发工具的示例:

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

我想知道我们是否可以同时记录表格和颜色？

Answer 1

console.table 上没有造型功能功能，根据 Console API .

然而，我能够想出一个非常hacky的解决方案来设置console.log的样式。语句就像一张 table 一样。这可能还不够好，但制作起来很有趣。

有很多限制，比如不能设置 width和 height特性。我的解决方法是用空格填充文本以匹配最长的属性名称/值。

(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 += '\n';

            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);

如果可以的话，我会做一些改进，也许会发布它以供大家笑笑。