有图有真像，常用的几个JavaScript调试技巧！

他们增容Javascript通常会加进Chrome和Firefox的控制面板做为增容辅助工具，责任编辑列举了四条用作增容Javascript的基本功，掌控它，让他们花更少的天数来化解严重错误和bug，进而提升合作开发效率。

1. debugger

除console.log, debugger是他们最喜欢、加速的增容辅助工具。继续执行标识符后，Chrome会在继续执行时手动暂停。你即使能把它PCB成前提，只在须要TNUMBERV12V4运转。

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) { //…. };

输出：

这是查阅传入函数参数的好方法。但是，如果控制面板提示他们形参的数目就更好了。在上面的例子中，func1期望3个参数，但是只有传入了2个参数。如果在标识符中没有处置这个参数，就很可能出错。

7. 在控制面板中加速访问元素

控制面板中比querySelector更快的方法是采用美元符号，(′css−selector′)将返回CSS选择器的第一个匹配项。 (css-selector)将返回CSS选择器的第一个匹配项。( ′css−selector ′)将返回CSS选择器的第一个匹配项。$(‘css-selector’)将返回所有匹配项。如果多次采用一个元素，能把它保存为一个变量。