【转载】14个你可能不知道的 JavaScript 调试技巧

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

咱们会列出14个你可能不知道的调试技巧, 可是一旦知道了，你就会火烧眉毛的想在下次须要调试 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);

输出结果: 

3. 试遍全部的尺寸

虽然把各类各样的手机都摆在桌子上看起来很酷，但这却很不现实。为何不选择直接调整界面大小呢? Chrome 浏览器提供了你所须要的一切。 进入检查面板点击 ‘切换设备模式’ 按钮，这样你就能够调整视窗的大小了！

4. 如何快速定位 DOM 元素

在元素面板上标记一个 DOM 元素并在 concole 中使用它。Chrome Inspector 的历史记录保存最近的五个元素，最后被标记的元素记为 $0，倒数第二个被标记的记为 $1，以此类推。

若是你像下面那样把元素按顺序标记为 ‘item-4′, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’ ，你就能够在 concole 中获取到 DOM 节点:

5. 用 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');

 

运行结果:

6.获取函数的堆栈轨迹信息

你可能知道 JavaScript 框架会产生不少的代码--迅速的。

它建立视图触发事件并且你最终会想知道函数调用是怎么发生的。

由于 JavaScript 不是一个很结构化的语言，有时候很难完整的了解到底发生了什么以及何时发生的。 这个时候就轮到 console.trace（在终端的话就只有 trace ）出场来调试 JavaScript了 。

假设你如今想看 car 实例在第33行调用 funcZ 函数的完整堆栈轨迹信息:

    var car;

    var func1 = function() {

     func2();

    }

    var func2 = function() {

     func4();

    }

    var func3 = function() {

    }

    var func4 = function() {

     car = new Car();

     car.funcX();

    }

    var Car = function() {

     this.brand = ‘volvo’;

     this.color = ‘red’;

     this.funcX = function() {

     this.funcY();

     }

     this.funcY = function() {

     this.funcZ();

     }

     this.funcZ = function() {

     console.trace(‘trace car’)

     }

    }

    func1();

    var car; 

    var func1 = function() {

     func2();

    } 

    var func2 = function() {

     func4();

    }

    var func3 = function() {

    } 

    var func4 = function() {

     car = new Car();

     car.funcX();

    }

    var Car = function() {

     this.brand = ‘volvo’;

     this.color = ‘red’;

     this.funcX = function() {

     this.funcY();

     }

     this.funcY = function() {

     this.funcZ();

     }

      this.funcZ = function() {

     console.trace(‘trace car’)、、

     }

    } 

    func1();

 

 

 

第33行会输出:

你能够看到func1调用了func2, func2又调用了func4。Func4 建立了Car的实例，而后调用了方法car.funcX，等等。

尽管你感受你对本身的脚本代码很是了解，这种分析依然是有用的。 好比你想优化你的代码。 获取到堆栈轨迹信息和一个全部相关函数的列表。每一行都是可点击的，你能够在他们中间先后穿梭。 这感受就像特意为你准备的菜单。

7. 格式化代码使调试 JavaScript 变得容易

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

8. 快速找到调试函数

来看看怎么在函数中设置断点。

一般状况下有两种方法：

1. 在查看器中找到某行代码并在此添加断点

2. 在脚本中添加 debugger

这两种方法都必须在文件中找到须要调试的那一行。

使用控制台是不太常见的方法。在控制台中使用 debug(funcName)，代码会在中止在进入这里指定的函数时。

这个操做很快，但它不能用于局部函数或匿名函数。不过若是不是这两种状况下，这多是调试函数最快的方法。（注意：这里并非在调用 console.debug 函数）。

    var func1 = function() {

    func2();

    };

    var Car = function() {

    this.funcX = function() {

    this.funcY();

    }

    this.funcY = function() {

    this.funcZ();

    }

    }

    var car = new Car();

 

在控制台中输入 debug(car.funcY)，脚本会在调试模式下，进入 car.funcY 的时候中止运行：

9.  屏蔽不相关代码

现在，常常在应用中引入多个库或框架。其中大多数都通过良好的测试且相对没有缺陷。可是，调试器仍然会进入与此调试任务无关的文件。解决方案是将不须要调试的脚本屏蔽掉。固然这也能够包括你本身的脚本。 点此（https://raygun.com/blog/javascript-debugging-with-black-box/）阅读更多关于调试不相关代码。

10. 在复杂的调试过程当中寻找重点

在更复杂的调试中，咱们有时须要输出不少行。你能够作的事情就是保持良好的输出结构，使用更多控制台函数，例如 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’);

 

输出：

例如：

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

11. 查看具体的函数调用和它的参数

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

    var func1 = function(x, y, z) {

    //....

    };

 

而后输出： 

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

12. 在控制台中快速访问元素

在控制台中执行 querySelector 一种更快的方法是使用美圆符。$(‘css-selector’)  将会返回第一个匹配的 CSS 选择器。$$(‘css-selector’) 将会返回全部。若是你使用一个元素超过一次，它就值得被做为一个变量。

13. Postman 很棒（但 Firefox 更快）

不少开发人员都使用 Postman 来处理 Ajax 请求。Postman 真不错，但每次都须要打开新的浏览器窗口，新写一个请求对象来测试。这确实有点儿烦人。

有时候直接使用在用的浏览器会更容易。

这样的话，若是你想请求一个经过密码保证安全的页面时，就再也不须要担忧验证 Cookie 的问题。这就是 Firefox 中编辑并从新发送请求的方式。

打开探查器并进入网络页面，右键单击要处理的请求，选择编辑并从新发送。如今你想怎么改就怎么改。能够修改头信息，也能够编辑参数，而后点击从新发送便可。

如今我发送了两次同一个请求，但使用了不一样的参数：

14. 节点变化时中断

DOM 是个有趣的东西。有时候它发生了变化，但你却并不知道为何会这样。不过，若是你须要调试 JavaScript，Chrome 能够在 DOM 元素发生变化的时候暂停处理。你甚至能够监控它的属性。在 Chrome 探查器上，右键点击某个元素，并选择中断（Break on）选项来使用：