标签 不打断点调试javascript 下的文章

自己写代码打断点比较容易,firebug直接会跳到断点处。

但是经常分析别人的代码,由于js写的很多很复杂,jquery和一些js框架通常是动态绑定的,js动作不直接写在html标签中,要想定位js的执行点比较困难。

1.当鼠标划过一个元素产生了动作,怎么定位这个动作执行了哪个js文件的哪个函数呢?
2.引申出另一个问题,怎样不打断点调试js ? 比如input submit绑定了click事件,怎样能够自动定位到js执行点。

上面两个问题,其实是js调试的另一个侧面,通常我们都是先打断点,然后浏览器暂停在断点处我们来看数据。不过借助工具,我们确实可以通过事件定位到js的执行点。
我最常用的是firebug,但firebug在这方面有明显缺陷,下面使用chrome自带调试工具和firefox自带调试工具说明。

下面提供两个方法:
1.chrome调试工具
a. Chrome中按F12调出调试面板,找到Sources,Event listener Breakpoints,这里勾选我们要监听的事件,比如click mouseover,当网页执行到的时候自动打断点,我们此时通过看变量判断错误。
b.开启 Chrome F12 的 Performence 记录,Event Log 里面有执行过的记录;
监听事件调试javascript

2.firefox默认的调试工具
代码中使用一个jquery给input submit绑定一个事件, 使用火狐f12自带的调试工具,会在这个元素后面显示一个ev,点开后可以看到执行的js文件和事件,确实很好用。
监听事件调试js

firebug已经于2016年底停止更新,看来是要用心了解一下火狐自带的调试工具了。