[译文&摘抄] 前端 Console 调试小技巧

原文地址：How to debug Front-end: Console
原文作者：Michał Witkowski
译文出自：掘金翻译计划
转自：https://juejin.im/post/5a08087f6fb9a04529363d71
译者：lsvih
校对者：Raoul1996

Console

Console.log

不说了

Console.assert(expression, message)

如果 expression 表达式的结果为 false，Console.assert 将会抛出错误。关键的是，assert 函数不会由于报错而停止评估之后的代码。它可以帮助你调试冗长棘手的代码，或者找到多次迭代后函数自身产生的错误。

function callAssert(a,b) {
  console.assert(a === b, 'message: a !== b ***** a: ' + a +' b:' +b);
}
callAssert(5,6);
callAssert(1,1);

console.count(label)

它就是一个会计算相同表达式执行过多少次的 console.log。其它的都一样。
并且，只有完全相同的表达式才会增加统计数字。

for(var i =0; i <=3; i++){
    console.count(i + ' Can I go with you?');
    console.count('No, no this time');
}

输出：

0 Can I go with you?: 1
No, no this time: 1
1 Can I go with you?: 1
No, no this time: 2
2 Can I go with you?: 1
No, no this time: 3
3 Can I go with you?: 1
No, no this time: 4

console.table()

var fruits = [
  { name: 'apple', like: true },
  { name: 'pear', like: true },
  { name: 'plum', like: false },
];
console.table(fruits);

可以看到，console.log 的结果也会出现。

注意：它在 Chrome 中可以正常工作，但是不保证兼容所有浏览器。

console.group() / console.groupEnd();

console.log('iteration');
for(var firstLevel = 0; firstLevel<2; firstLevel++){
  console.group('First level: ', firstLevel);
  for(var secondLevel = 0; secondLevel<2; secondLevel++){
    console.group('Second level: ', secondLevel);
    for(var thirdLevel = 0; thirdLevel<2; thirdLevel++){
      console.log('This is third level number: ', thirdLevel);
    }
    console.groupEnd();
  }
  console.groupEnd();
}

将输出分组，非常漂亮的布局。

console.trace();

console.trace 会将调用栈打印在控制台中。

function func1() {
  func2();
}
function func2() {
  func3();
}
function func3() {
  console.trace();
}
func1();

输出：

VM2229:8 console.trace
func3 @ VM2229:8
func2 @ VM2229:5
func1 @ VM2229:2
(anonymous) @ VM2229:10

自定义控制台输出样式

console.log('%c Truly hackers code! ', 'background: #222; color: #bada55');

试着执行一下吧，超酷炫！