在chrome中为console.table（）添加样式

Question

我正在JavaScript中构建一个简单的单元测试方法。输出正在控制台中打印。

我希望传递的测试行为绿色，失败的测试为红色（背景或文本）。

我知道我可以在console.log（）中添加样式，但是我还没有找到一种方法来向console.table（）添加样式。

那么，它甚至可能吗？如果没有，那将是另一种选择。

代码示例：

console.table([
    {
        status:   'failed',
        function: 'Validate.int',
        asserted: true,
        result:   false
    },{
        status:   'passed',
        function: 'Validate.float',
        asserted: true,
        result:   true
    }
]);

提前Tnx！

Answer 1

尝试在console.log内使用console.table并使用样式

工作和测试代码：

console.table(console.log('%c test1 ', 'background: #cdcdcd; color: #000000'),console.log('%c test2 ', 'background: #ff0000; color: #ffffff'));

对于你的情况，你可以这样做

var x = {
            status: 'failed',
            function: 'Validate.int',
            asserted: true,
            result: false
        };

console.table(
        console.log('%c '+ x.status + x.function  + ' ', 'background: #cdcdcd; color: #000000'), add other elements of the array);

将我的x替换为数组元素

Answer 2

即使@faby创建了一个使用console.log（）的好例子，我仍然没有发现它适用于我的问题。我也得出结论，无法在console.table（）中添加样式。

我想出了一个解决方案，将结果嵌入到组中，显示嵌套在其中的表：

console.groupCollapsed('Testing unit: %s', unit);
for (var r in results) {
    var res = results[r];
    console.groupCollapsed('%c  %c' + res.status, 'background-color: ' + (res.status === 'failed' ? 'red' : 'green') + '; margin-right: 10px', 'background-color: transparent');
    console.table({
        Result:   {value: res.status},
        Function: {value: res.function},
        Asserted: {value: res.asserted},
        Returned: {value: res.returned}
    });
    console.groupEnd();
}
console.groupEnd();

这给出了以下输出：