JavaScript调试技巧

熟悉工具可以让工具在工作中发挥出更大的作用。尽管江湖传言 JavaScript 很难调试，但如果你掌握了几个技巧，就能用很少的时间来解决错误和bug。

debugger

除了console.log, debugger是我们最喜欢、快速且肮脏的调试工具。执行代码后，Chrome会在执行时自动停止。你甚至可以把它封装成条件，只在需要时才运行。

if (thisThing) {
   debugger;
}

用console.table显示数组对象

有时， 有一组复杂的对象要查看。可以通过 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);

效果图如下：

javascript广告位

使用 console.time() 和 console.timeEnd() 测试循环

要得知某些代码的执行时间，特别是调试缓慢循环时，非常有用。 甚至可以通过给方法传入不同参数，来设置多个定时器。来看看它是怎么运行的：

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

运行产生了一下结果：

屏蔽不相关代码

现在，我们经常在应用中引入几个库或框架。其中大多数都经过良好的测试且相对没有缺陷。 但是，调试器仍然会进入与调试任务无关的文件。解决方案是屏蔽不需要调试的脚本。当然可以包括你自己的脚本。在这篇文章中阅读更多关于调试不相关代码（https://raygun.com/blog/javascript-debugging-with-black-box/）