关于调试JavaScript，当然是越快越好，我们在这里罗列了一些如何愈加快速高效调试JS的重要窍门。
熟习了解工具关于完成义务来说有着重要的作用。虽然JavaScrip是t出了名的难调试，但假设你知道一些窍门，那你可以花更少的时间去处置这些error和bug。
我们在这里罗列了16个你能够不知道的调试技巧，但它们能够是你想要在下次调试JavaScript代码之前记住的。
假设你想更快地调试JavaScript的bug，你可以尝试Raygun崩溃报告（ Raygun Crash Reporting ），它可以提供应你关于bugs的告警以及堆栈追踪（stack trace）。
虽然许多技巧也异样适用于其他的反省器（inspector），但这里提及的大部分的技巧是基于Chrome和Firefox的。
1. debugger除了console.log，debugger是我最喜欢的快速直接的调试工具。假设你在代码中嵌入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. 尝试一切的尺寸虽然在你的桌上拥有每一种移动设备特别棒，但这并不理想。不如重新调整视觉视口（viewport）的大小？Chrome提供了你所需求的一切。翻开阅读器的inspector并点击选中设备形式（device mode）的按钮。你就可以察看到媒体查询（media queries）了。
4. 如何快速找到你需求的DOM元素在元素面板中标记一个DOM元素，并在控制台中运用它。Chrome的Inspector会保存历史记载中最近的5个元素，最后被标记的元素会被显示成 1，以此类推。假设你按顺序标记“item4“，”item-3“，”item-2“，”item-1“，”item-0“，那么你可以像下图这样在控制台中拜访DOM节点。
5. 用console.time()和console.timeEnd()来权衡loops快慢知道一段代码究竟需求多长时间来执行是很有协助的，尤其是当你在调试执行速度慢的代码的时分。你甚至可以经过给函数赋上不同的标签值来设置多个timer。让我们看看它是怎样任务的：
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）的时分了。试想一下你想查看在第33行car实例中关于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行会输入：
(责任编辑：admin)