JavaScript调试技巧

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

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

现在开始。

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

1. ‘debugger;’

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

[javascript]view plain copy
if (thisThing) {  
    debugger;  
}  

2. 把 objects 输出成表格

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

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

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

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

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

运行结果:

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

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

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

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

[javascript]view plain copy
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 一样发挥你的想象力！

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

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

[javascript]view plain copy
var func1 = function(x, y, z) {  
//....  
};  

然后输出：