javascript的调试技巧
1. debugger
‘debugger’ 与后端调试的断点类似。只要把它写到代码里，Chrome 等浏览器运行js的时候就会自动停在那。也可以用条件语句把它包裹起来，这样就可以在需要的时候执行它。
if(flag){
debugger;
}2. 把objects以表格形式输出显示
有时候你可能有一堆对象需要查看。你可以用 console.log 把每一个对象都输出来，你也可以用 console.table 语句把它们直接输出为一个表格！
console.table(objects);
3. 模拟各种设备屏幕尺寸
Chrome 浏览器的调试窗口提供了模拟各种设备屏幕尺寸，从而判断显示效果。 进入检查面板点击 ‘切换设备模式’ 按钮，这样你就可以调整视窗的大小了！具体可参见下图红色标记。
4. 如何快速定位 DOM 元素
在元素面板上标记一个 DOM 元素并在 concole 中使用它。Chrome Inspector 的历史记录保存最近的五个元素，最后被标记的元素记为 $0，倒数第二个被标记的记为 $1，以此类推。
如果你像下面那样把元素按顺序标记为 ‘item-4′, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’ ，你就可以在 concole 中获取到 DOM 节点:
5. 用 console.time() 和 console.timeEnd() 测试循环耗时
当你想知道某些代码的执行时间的时候这个工具将会非常有用，特别是当你定位很耗时的循环的时候。你甚至可以通过标签来设置多个 timer 。demo 如下:
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）出场来调试 JavaScript了 。
假设你现在想看 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, func2又调用了func4。Func4 创建了Car的实例，然后调用了方法car.funcX，等等。
尽管你感觉你对自己的脚本代码非常了解，这种分析依然是有用的。 比如你想优化你的代码。 获取到堆栈轨迹信息和一个所有相关函数的列表。每一行都是可点击的，你可以在他们中间前后穿梭。 这感觉就像特地为你准备的菜单。
7. 格式化JavaScript代码
有时候引入的js文件，由于采用压缩文件，常常在调试时显得很混乱，不利于快速调试查看。Chrome 浏览器可以格式化 JavaScript 文件，使之易读。格式化出来的代码在可读性上可能不如源代码 —— 但至少你可以观察到发生的错误。点击源代码查看器下面的美化代码按钮 {} 即可。
8. 快速找到调试函数
来看看怎么在函数中设置断点。
通常情况下有两种方法：
-
在查看器中找到某行代码并在此添加断点
-
在脚本中添加 debugger
这两种方法都必须在文件中找到需要调试的那一行。
使用控制台是不太常见的方法。在控制台中使用 debug(funcName)，代码会在停止在进入这里指定的函数时。
这个操作很快，但它不能用于局部函数或匿名函数。不过如果不是这两种情况下，这可能是调试函数最快的方法。（注意：这里并不是在调用 console.debug 函数）。
var func1 = function() {
func2();
};
var Car = function() {
this.funcX = function() {
this.funcY();
}
this.funcY = function() {
this.funcZ();
}
}
var car = new Car();
在控制台中输入 debug(car.funcY)，脚本会在调试模式下，进入 car.funcY 的时候停止运行：
9. 屏蔽不相关代码
如今，经常在应用中引入多个库或框架。其中大多数都经过良好的测试且相对没有缺陷。但是，调试器仍然会进入与此调试任务无关的文件。解决方案是将不需要调试的脚本屏蔽掉。当然这也可以包括你自己的脚本。 点此（https://raygun.com/blog/javascript-debugging-with-black-box/）阅读更多关于调试不相关代码。
10. 在复杂的调试过程中寻找重点
在更复杂的调试中，我们有时需要输出很多行。你可以做的事情就是保持良好的输出结构，使用更多控制台函数，例如 Console.log，console.debug，console.warn，console.info，console.error 等等。然后，你可以在控制台中快速浏览。但有时候，某些JavaScrip调试信息并不是你需要的。现在，可以自己美化调试信息了。在调试JavaScript时，可以使用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设置自定义样式等等，还有很多更好的console.log()使用方法。 如果使用的是单页应用框架，可以为视图（view）消息创建一个样式，为模型（models），集合（collections），控制器（controllers）等创建另一个样式。也许还可以像 wlog，clog 和 mlog 一样发挥你的想象力！
11. 查看具体的函数调用和它的参数
在 Chrome 浏览器的控制台（Console）中，你会把你的注意力集中在具体的函数上。每次这个函数被调用，它的值就会被记录下来。
var func1 = function(x, y, z) {
//....
};
然后输出：
这是查看将哪些参数传递到函数的一种很好的方法。但我必须说，如果控制台能够告诉我们需要多少参数，那就好了。在上面的例子中，函数1期望3个参数，但是只有2个参数被传入。如果代码没有在代码中处理，它可能会导致一个 bug 。
12. 在控制台中快速访问元素
在控制台中执行 querySelector 一种更快的方法是使用美元符。$(‘css-selector’) 将会返回第一个匹配的 CSS 选择器。$$(‘css-selector’) 将会返回所有。如果你使用一个元素超过一次，它就值得被作为一个变量。
13. Postman 很棒（但 Firefox 更快）
很多开发人员都使用 Postman 来处理 Ajax 请求。Postman 真不错，但每次都需要打开新的浏览器窗口，新写一个请求对象来测试。这确实有点儿烦人。
有时候直接使用在用的浏览器会更容易。
这样的话，如果你想请求一个通过密码保证安全的页面时，就不再需要担心验证 Cookie 的问题。这就是 Firefox 中编辑并重新发送请求的方式。
打开探查器并进入网络页面，右键单击要处理的请求，选择编辑并重新发送。现在你想怎么改就怎么改。可以修改头信息，也可以编辑参数，然后点击重新发送即可。
现在我发送了两次同一个请求，但使用了不同的参数：
14. 节点变化时中断
DOM 是个有趣的东西。有时候它发生了变化，但你却并不知道为什么会这样。不过，如果你需要调试 JavaScript，Chrome 可以在 DOM 元素发生变化的时候暂停处理。你甚至可以监控它的属性。在 Chrome 探查器上，右键点击某个元素，并选择中断（Break on）选项来使用：
上一篇： android常用的调试技巧
下一篇： RocketMq源码解读（一）