JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置
2014-06-26 11:03
645 查看
日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法。
1、使用firefox调试
我们可以使用firefox的debug工具,找到指定元素,然后查看事件面板
2、使用chrome调试
在要检查的元素上单击右键选择查看元素,然后,右边的面板中会显示style标签,切换到EventListenrs标签,可以看到相关的事件绑定信息。点击最右边的文件名称还可以跳转到事件定义代码在脚本文件中的位置。不过这种方法并非总是可用,下面会提到。
3、使用 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
1、使用firefox调试
我们可以使用firefox的debug工具,找到指定元素,然后查看事件面板
2、使用chrome调试
在要检查的元素上单击右键选择查看元素,然后,右边的面板中会显示style标签,切换到EventListenrs标签,可以看到相关的事件绑定信息。点击最右边的文件名称还可以跳转到事件定义代码在脚本文件中的位置。不过这种方法并非总是可用,下面会提到。
3、使用 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
相关文章推荐
- JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置
- JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置
- 好强大的页面功能调试(js调试,查找js绑定的事件)值得学习
- paip.JS的调试--DOM元素的属性与事件绑定
- js练习之事件切换图片和控制css样式以及指定页面滚动位置
- 我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
- js 兼容性之代码触发绑定的事件
- js调试-定位到函数所在文件位置
- paip.调试js 查看元素事件以及事件断点
- Android IOC 之 注解绑定控件 以及事件 事例 代码简单注释讲解
- 牛腩购物 8 整合用户留言 动软生成器 ,.NET在后置代码中输入JS提示语句(背景不会变白),repeater 循环的时候事件判断,repeater 隔行 奇数行,item列,隐藏区块 Panel 的使用,前台绑定代码的时候使用函数
- 当js操作dom元素时,遇到undefined时,要检查一下js代码与html元素的位置
- 根据已知字符串遍历整个数据库查找它所在的表和列位置以及出现的次数
- JS 事件绑定函数代码
- 不要再吹水地球人听不懂的技术,咱来点干货!--中文前端UI框架Kit(四)给你真正的原生的drag以及drop事件,而不是像市面上主流的Js框架jQuery,Ext等,利用mousemove事件,判断位置来模拟
- js_前台页面如何设置radio、checkbox、select三者的值以及绑定事件,方便后台接收数据
- php手册里的 显示所有你查找的字符的位置,以及该字符所在的单词
- 用js控制按钮事件,将指定内容添加到文本域的光标所在位置。
- 我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环