你可能不知道的javascript调试技巧

男娘i 2022-06-06 14:15 286阅读 0赞

了解你的工具可以极大的帮助你完成任务。尽管 JavaScript 的调试非常麻烦，但在掌握了技巧 (tricks) 的情况下，你依然可以用尽量少的的时间解决这些错误 (errors) 和问题 (bugs) 。

**我们会列出你可能不知道的调试技巧**, 但是一旦知道了，你就会迫不及待的想在下次需要调试 JavaScript 代码的时候使用它们！

**现在开始**。

虽然许多技巧也可以用在别的检查工具上，但大部分的技巧是用在 Chrome Inspector 和 Firefox 上的。

### **1. ‘debugger;’** ###

‘debugger’ 是 console.log 之外我最喜欢的调试工具，简单暴力。只要把它写到代码里，Chrome 运行的时候就会自动自动停在那。你甚至可以用条件语句把它包裹起来，这样就可以在需要的时候才执行它。

if (thisThing) {
        debugger;
    }

### **2. 把 objects 输出成表格** ###

有时候你可能有一堆对象需要查看。你可以用 console.log 把每一个对象都输出出来，你也可以用 console.table 语句把它们直接输出为一个表格！

var animals = [
        { animal: 'Horse', name: 'Henry', age: 43 },
        { animal: 'Dog', name: 'Fred', age: 13 },
        { animal: 'Cat', name: 'Frodo', age: 18 }
    ];
     
    console.table(animals);

![Center][]

### **3.用 console.time() 和 console.timeEnd() 测试循环耗时** ###

当你想知道某些代码的执行时间的时候这个工具将会非常有用，特别是当你定位很耗时的循环的时候。你甚至可以通过标签来设置多个 timer 。demo 如下:

console.time('Timer1');
     
    var items = [];
     
    for(var i = 0; i < 100000; i++){
       items.push({index: i});
    }
     
    console.timeEnd('Timer1');

运行结果:

![Center 1][]

### **4.格式化代码使调试 JavaScript 变得容易** ###

有时候你发现产品有一个问题，而 source map 并没有部署到服务器。**不要害怕。**Chrome 可以格式化 JavaScript 文件，使之易读。格式化出来的代码在可读性上可能不如源代码 —— 但至少你可以观察到发生的错误。点击源代码查看器下面的美化代码按钮 \{\} 即可。

![Center 2][]

### **5.在复杂的调试过程中寻找重点** ###

在更复杂的调试中，我们有时需要输出很多行。你可以做的事情就是保持良好的输出结构，使用更多控制台函数，例如 Console.log，console.debug，console.warn，console.info，console.error 等等。然后，你可以在控制台中快速浏览。但有时候，某些JavaScrip调试信息并不是你需要的。现在，可以自己美化调试信息了。在调试JavaScript时，可以使用CSS并自定义控制台信息：

console.todo = function(msg) {
    	console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);
    }
     
    console.important = function(msg) {
    	console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);
    }
     
    console.todo(“This is something that’ s need to be fixed”);
    console.important(‘This is an important message’);

输出：

![Center 3][]

**例如：**

在console.log()中， 可以用%s设置字符串，%i设置数字，%c设置自定义样式等等，还有很多更好的console.log()使用方法。 如果使用的是单页应用框架，可以为视图（view）消息创建一个样式，为模型（models），集合（collections），控制器（controllers）等创建另一个样式。也许还可以像 wlog，clog 和 mlog 一样发挥你的想象力！

### **6.查看具体的函数调用和它的参数** ###

在 Chrome 浏览器的控制台（Console）中，你会把你的注意力集中在具体的函数上。每次这个函数被调用，它的值就会被记录下来。

var func1 = function(x, y, z) {
    //....
    };

然后输出：

![Center 4][]

这是查看将哪些参数传递到函数的一种很好的方法。但我必须说，如果控制台能够告诉我们需要多少参数，那就好了。在上面的例子中，函数1期望3个参数，但是只有2个参数被传入。如果代码没有在代码中处理，它可能会导致一个 bug 。

以上，大家尝试一下吧，当你使用熟练时，就会感觉开发前台简直是so easy！

[Center]: /images/20220606/2e730403f6904f9d91b7d6d2654495e1.png
[Center 1]: /images/20220606/2a46304c1feb46df9ffaf8c1582fefa8.png
[Center 2]: /images/20220606/80ec706af303415bb4e6cb2e1386af27.png
[Center 3]: /images/20220606/7ae9536297eb4d3990a0e1a88b7c1d69.png
[Center 4]: /images/20220606/d7bb65f2593c49958a1ad179f8a1b495.png