JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置

原文: JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置

平常的网页开发调试工做中，常常须要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置，下面介绍三种用来跟踪页面中的事件的方法。

一、使用firefox调试

咱们可使用firefox的debug工具，找到指定元素，而后查看事件面板

二、使用chrome调试

在要检查的元素上单击右键选择查看元素，而后，右边的面板中会显示style标签，切换到EventListenrs标签，能够看到相关的事件绑定信息。点击最右边的文件名称还能够跳转到事件定义代码在脚本文件中的位置。不过这种方法并不是老是可用，下面会提到。

三、使用 Chrome Web Store 中 Visual Event 检查事件绑定信息

上面的两种方法，当咱们定位定义事件的代码位置时，若是咱们使用了JS库（好比jquery）的话调试工做又会变得复杂，程序每每会把咱们引导到jquery库中，这样的话仍然是不方便找到在哪一个文件的那个行中addEventListener了事件。这个时候就须要 Visual Event 闪亮登场了……

安装完 Visual Event 后，工具条上会有 Visual Event 的图标。而后打开咱们要调试的页面，在工具栏上点击他那个火眼金睛同样的眼睛图标，网页上全部绑定了事件的 HTML 元素都会由一个半透明的蓝色遮罩层覆盖，鼠标移动到相应的元素上便可看到事件绑定信息。

刚才说了，在使用了Js 库的时候，visual event 依然很好用，下面列出它支持的几个库的名字及版本信息：

• DOM 0 events
• jQuery 1.2.x +
• YUI 2.6.x (2.x might work!)
• MooTools 1.2.x
• Prototype 1.6.x
• JAK (Events 2.2)
• Glow

获取 Visual Event

VisualEvent 在GitHub上的位置 ：https://github.com/DataTables/VisualEvent

VisualEvent 在Chrome webstore 上的位置：https://chrome.google.com/webstore/detail/visual-event/pbmmieigblcbldgdokdjpioljjninaim

本文参考资料

http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/

http://www.sprymedia.co.uk/article/Visual+Event