很少人知道的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

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值