[译文&摘抄] 前端 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');

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