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

这给出了以下输出：