9种使用Chrome Firefox 自带调试工具调试javascript技巧

我们调试Javascript一般会用到Chrome或Firefox自带的调试工具，本文列出了几条用于调试Javascript的技巧，掌握它们，让我们花更少的时间来解决错误和bug，从而提高开发效率。

1. debugger

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

if (thisThing) { 
 debugger; 
}

2. 用表格显示对象

有时， 有一组复杂的对象要查看。可以通过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. 使用 console.time() 和 console.timeEnd() 测试循环

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

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

运行产生了一下结果：

5. 将代码格式化后再调试JavaScript

有时代码会在生产环境出问题，但是你的source maps没有部署在生产环境上。不要怕。Chrome可以将您的JavaScript文件格式化。格式化后的代码虽然不像真实代码那样有用，但至少可以看到发生了什么。点击 Chrome控制台中的源代码查看器中的{}按钮即可。

6. 观察特定函数的调用及参数
在Chrome控制台中，可以观察特定的函数。每次调用该函数，就会打印出传入的参数。

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