13个实用的JavaScript调试小技巧

debugger

除了console.log，debugger就是另外一个我很喜欢的快速调试的工具，将debugger加入代码以后，Chrome会自动在插入它的地方中止，很像C或者Java里面打断点。你也能够在一些条件控制中插入该调试语句，譬如：

if (thisThing) {
    debugger;
}

将Objects以表格形式展现

有时候咱们须要看一些复杂的对象的详细信息，最简单的方法就是用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);

多屏幕尺寸测试

Chrome有一个很是诱人的功能就是可以模拟不一样设备的尺寸，在Chrome的Inspector中点击toggle device mode按钮，而后就能够在不一样的设备屏幕尺寸下进行调试咯：

在Console快速选定DOM元素

在Elements选择面板中选择某个DOM元素而后在Console中使用该元素也是很是常见的一个操做，Chrome Inspector会缓存最后5个DOM元素在它的历史记录中，你能够用相似于Shell中的$0等方式来快速关联到元素。譬以下图的列表中有‘item-4′, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’这几个元素，你能够这么使用：

获取某个函数的调用追踪记录

JavaScript框架极大方便了咱们的开发，可是也会带来大量的预约义的函数，譬如建立View的、绑定事件的等等，这样咱们就不容易追踪咱们自定义函数的调用过程了。虽然JavaScript不是一个很是严谨的语言，有时候很难搞清楚到底发生了啥，特别是当你须要审阅其余人的代码的时候。这时候console.trace就要起做用咯，它能够帮你进行函数调用的追踪。譬以下面的代码中咱们要追踪出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();

这边就能够清晰地看出func1调用了func2，而后调用了func4，func4建立了Car的实例而后调用了car.funcX。

格式化被压缩的代码

有时候在生产环境下咱们发现了一些莫名奇妙的问题，而后忘了把sourcemaps放到这台服务器上，或者在看别人家的网站的源代码的时候，结果就看到了一坨不知道讲什么的代码，就像下图。Chrome为咱们提供了一个很人性化的反压缩工具来加强代码的可读性，大概这么用：

快速定位调试函数

当咱们想在函数里加个断点的时候，通常会选择这么作：

在Inspector中找到指定行，而后添加一个断点

在脚本中添加一个debugger调用

不过这两种方法都存在一个小问题就是都要到对应的脚本文件中而后再找到对应的行，这样会比较麻烦。这边介绍一个相对快捷点的方法，就是在console中使用debug(funcName)而后脚本会在指定到对应函数的地方自动中止。这种方法有个缺陷就是没法在私有函数或者匿名函数处中止，因此仍是要因时而异：

var func1 = function() {
    func2();
};

var Car = function() {
    this.funcX = function() {
        this.funcY();
    }

this.funcY = function() {
    this.funcZ();
    }
}

var car = new Car();

禁止不相关的脚本运行

当咱们开发现代网页的时候都会用一些第三方的框架或者库，它们几乎都是通过测试而且相对而言Bug较少的。不过当咱们调试咱们本身的脚本的时候也会一不当心跳到这些文件中，引起额外的调试任务。解决方案呢就是禁止这部分不须要调试的脚本运行，详情可见这篇文章：: javascript-debugging-with-black-box。

在较复杂的调试状况下发现关键元素

在一些复杂的调试环境下咱们可能要输出不少行的内容，这时候咱们习惯性的会用console.log, console.debug, console.warn, console.info, console.error这些来进行区分，而后就能够在Inspector中进行过滤。不过有时候咱们仍是但愿可以自定义显示样式，你能够用CSS来定义个性化的信息样式：

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 来表明自定义的样式。

监测指定函数的调用与参数

在Chrome中能够监测指定函数的调用状况以及参数：

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

这种方式可以让你实时监控到底啥参数被传入到了指定函数中。

Console中使用$进行元素查询

在Console中也可使用来进行相似于querySelector那样基于CSS选择器的查询，(‘css-selector’) 会返回知足匹配的第一个元素，而$$(‘css-selector’) 会返回所有匹配元素。注意，若是你会屡次使用到元素，那么别忘了将它们存入变量中。

Postman

不少人习惯用Postman进行API调试或者发起Ajax请求，不过别忘了你浏览器自带的也能作这个，而且你也不须要担忧啥认证啊这些，由于Cookie都是自带帮你传送的，这些只要在network这个tab里就能进行，大概这样子：

DOM变化检测

DOM有时候仍是很操蛋的，有时候压根不知道啥时候就变了，不过Chrome提供了一个小的功能就是当DOM发生变化的时候它会提醒你，你能够监测属性变化等等：