鉻控制檯表中添加顏色

Question

這是我們如何可以登錄Chrome瀏覽器開發工具，顏色的例子：

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

我不知道我們是否可以登錄有桌子和顏色，同一時間？

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

，如果我可以，我會做一些改進，也許它發佈的笑聲。