铬控制台表添加颜色

Posted 2023-03-07

【中文标题】铬控制台表添加颜色

【英文标题】：Chrome console table add colors

【发布时间】：2017-07-25 17:20:59

【问题描述】：

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

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

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

【问题讨论】：

它doesn't have这样的参数。

【参考方案1】：

根据Console API，console.table 函数没有样式功能。

但是，我想出了一个非常老套的解决方案，将console.log 语句的样式设置为就好像它是一个表格一样。这可能还不够好，但制作起来很有趣。

存在许多限制，例如无法设置 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);

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

【讨论】：

！！！！！！这太不可思议了 ！！！！！非常感谢，我会用它来增强它！如果您可以创建一些库并发布它，那将是非常棒的......非常感谢

哈哈谢谢。我会看看我能做什么。显然，这将是非常有限和hacky的。