將樣式添加到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

即使@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(); 

這給出了以下的輸出：

Answer 2

嘗試使用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您array