灵活使用console让 js调试更简单(2)

如果我们使用 console.log 来输出上面的内容，我们会得到一些非常无用的输出:

▶ (3) [{…}, {…}, {…}] 

点击这个小箭头可以展开看到对象的内容，但是，它并不是我们想要的“一目了然”。

但是 console.table(data) 的输出要有用得多。

第二个可选参数是所需列的列表。显然，所有列都是默认值，但我们也可以这样做:

> console.table(data, ["id", "price"]); 

这里要注意的是这是乱序的 - 最右边的列标题上的箭头显示了原因。 我点击该列进行排序。 找到列的最大或最小，或者只是对数据进行不同的查看非常方便。 顺便说一句，该功能与仅显示一些列无关，它总是可用的。

console.table() 只能处理最多1000行，因此它可能不适合所有数据集。

console.assert()

assert() 与 log() 是相同的函数，assert()是对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台，示例如下：

var arr = [1, 2, 3];  
console.assert(arr.length === 4); 

有时我们需要更复杂的条件句。例如，我们已经看到了用户 WAL0412 的数据问题，并希望仅显示来自这些数据的事务，这是直观的解决方案。

console.assert(tx.buyer === 'WAL0412', tx); 

这看起来不错，但行不通。记住，条件必须为false，断言才会执行，更改如下：

console.assert(tx.buyer !== 'WAL0412', tx); 

与其中一些类似，console.assert() 并不总是特别有用。但在特定的情况下，它可能是一个优雅的解决方案。

console.count()

另一个具有特殊用途的计数器，count只是作为一个计数器，或者作为一个命名计数器，可以统计代码被执行的次数。

for(let i = 0; i < 10000; i++) {  
  if(i % 2) {  
    console.count('odds');  
  }  
  if(!(i % 5)) {  
    console.count('multiplesOfFive');  
  }  
  if(isPrime(i)) {  
    console.count('prime');  
  }  
} 

这不是有用的代码，而且有点抽象。这边也不打算演示 isPrime 函数，假设它是成立的。

执行后我们会得到一个列表：

odds: 1  
odds: 2  
prime: 1  
odds: 3  
multiplesOfFive: 1  
prime: 2  
odds: 4  
prime: 3  
odds: 5  
multiplesOfFive: 2  
... 

还有一个相关的 console.countReset()，可以使用它重置计数器。

console.trace()

trace() 在简单的数据中很难演示。当您试图在类或库中找出是哪个实际调用者导致了这个问题时，它的优势就显现出来了。

例如，可能有 12 个不同的组件调用一个服务，但是其中一个组件没有正确地设置依赖项。

export default class CupcakeService {   
  constructor(dataLib) {  
    this.dataLib = dataLib;  
    if(typeof dataLib !== 'object') {  
      console.log(dataLib);  
      console.trace();  
    }  
  }  
  ...  
} 

（编辑：ASP站长网）