很少人知道的JS调试方法

原文地址： http://amasad.me/2014/03/09/lesser-known-javascript-debugging-techniques/?utm_source=javascriptweekly&utm_medium=email

只会在调试窗口用鼠标下断点吗，看看下面这些炫酷的调试方法吧。

1，console 接口

console提供了常用的调试接口，都是以 “$” 开头的方法，其中三个重要的方法如下：

debug(method): 调试一个方法，当该方法调用时会暂停并且在源码中定位，效果和断点类似。undebug可以停止调试。
monitor(method): 当一个方法被调用时，在console中打印出方法名和参数。unmonitor可以停止调试。
monitorEvents(object[, events]): 当事件触发时，在console中打印出事件名和参数。unmonitorEvents可以停止调试。

另外还有一些不太重要的接口：
$_: 返回解析最多的一次表达式的值
$0-$4: 最近五次选择的dom节点
$(selector): 同 querySelect
$$(selector): 同 querySelectAll
copy(object): 把一个对象序列化之后复制到剪切板。
dir(object): 显示一个对象所有的key/value。

2，使用Debug-Utils调试

在代码中可以通过 debugger来下断点，比如：
function () {
…;
debugger;
….;
}
当执行此函数时会在debugger处暂停，效果和在调试窗口下断点类似的。

现在有一个工具DU利用此功能提供了一套console下的调试接口，工具地址： https://github.com/amasad/debug_utils ，可以引用js，也直接安装chrome插件（ https://chrome.google.com/webstore/detail/debug-utils/djailkkojeahmihdpcelmmobkpepmkcl ）。

DU提供了如下接口：

$dum:调试一个方法，当调用该方法时暂停并定位源码，非常类似 debug ，但是比debug强大，因为debug无法调试native方法。
比如 $dum(Event.prototype.preventDefault); 如果用 debug(Event.prototype.preventDefault); 会发现是无效的。

$duv: 调试事件，当事件触发时会暂停并定位源码, 比如：
$dev($(“a”), “click”)

$duml: 调试一个方法，但不是暂停而是在console中打印出函数名和参数，类似monitor。
$dumr: 停止 $dum调试

更多功能参见：  https://github.com/amasad/debug_utils