chrome devtool 技巧 之 debug

[spacewander]

这是chrome devtool技巧的最后一篇了……写完这篇算是填了坑。说好的花几天看看呢，其实花了整整半个月了。

这一篇讲的是devtool中的debug技巧。

debug技巧

debug之道，在于运气，在于淡定；debug之术，在于断点触发，在于定格上下文。

debug之道，道可道，非常道，名可名，非常名。本人吹水水平不高，所以不可能从道的角度上指点江山，只能在具体的术上激扬文字，呃不，扯上几句。

何为断点触发？chrome devtool中提供了普通断点，条件断点，DOM断点和XHR断点这四种断点，基本上无论JS中要执行什么代码，都会有合适的断点用得上。（除非绑定了外面的C++ add-on，不过一般都不会遇到这种问题）

何为定格上下文？当断点被触发时，你就会停下来。这时候会出于一个上下文环境中，在右侧的框中能够查看当前所有的变量，还可以在call stack中查看前面的函数调用。甚至可以在下面的console面板（你可以把它拖上来）中执行各种上下文可用的函数（如果引入了underscore或jQuery，就能直接执行underscore之类的js库的函数哦）。

下面详细介绍下这两个方面。

断点触发

条件断点：正常断点 》 右键菜单 》 Edit breakpoint，添加表达式，当表达式为true时使断点生效。条件断点的颜色为橙色

异常断点：右边最顶上一栏，最后一个像插座的按钮，可以选择是否在（未捕获）异常发生时触发断点

DOM断点：前面关于Element面板那一章说了。这里可以查看都设置了哪些DOM断点

XHR断点：当出现URL匹配的请求时，触发断点。URL模式为空时，匹配所有请求

定格上下文

定格上下文所需的，要找到对应的stack。在chrome中，我们甚至可以让devtool显示之前异步的调用（XHR或timeout事件触发），只需勾选右边的Async选项即可。

有趣的是，在call stack中，如果选择不同的stack，console的上下文也会跟着改变。可以试一下在不同的stack中打印this的值，你会发现不同的stack输出结果会不一样。这意味着，call stack中不仅可以反应当前上下文，还可以切换过往的上下文。 是不是有点时光机的感觉？

我有特殊的debug技巧

待未捕获的异常发生时，通过window的error事件获取报告：

window.onerror = function(msg, url, line){
   console.log('get uncaught error: " + msg + ", url = " + url + ", line = " + line ');
}

​ 另外，在调试的过程中，当程序因为某个断点而停下来时，你甚至可以修改调试中的JS代码（记得修改后需要Ctrl+s保存），从而在等下执行时得到不同的结果。

大概就是这样子。