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

柔情只为你懂 2022-06-02 03:43 286阅读 0赞

原文地址：How to debug Front-end: Console  
原文作者：Michał Witkowski  
译文出自：掘金翻译计划  
转自：[https://juejin.im/post/5a08087f6fb9a04529363d71][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);

![这里写图片描述][SouthEast]

可以看到，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();
    }

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

![这里写图片描述][SouthEast 1]

### 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');

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

[https_juejin.im_post_5a08087f6fb9a04529363d71]: https://juejin.im/post/5a08087f6fb9a04529363d71
[SouthEast]: /images/20220602/be7cf82e9bbe40838444b494f0b04b56.png
[SouthEast 1]: /images/20220602/e23cab1397994fb28d297c9dccb1e062.png