如何找到神秘绑定的javascript事件

前端之家收集整理的这篇文章主要介绍了如何找到神秘绑定的javascript事件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有一个非常复杂的HTML5应用程序我正在研究(主干,木偶,jquery,下划线,把手,引导程序等),并且在应用程序内部是一个带有表单的模态弹出窗口.

当模式弹出打开时,第一次单击任何表单字段时,表单字段将取消选择自身.在第一次单击后,您可以正常使用该表单.当应用程序最终加载到生产中的iFrame中时(不要问)第一次单击任何表单字段或将鼠标悬停在任何按钮上时,整个页面向下滚动直到div元素的顶部,表单位于内部模态位于页面的顶部,但在它执行一次后,它不会再次执行(混淆了吗?是的,它是复杂的和分层的).

我对如何开始调试这个问题感到茫然(成千上万行代码,两把库).

我试过这些:

console.log('bound events: ',$._data(this.$el.find('#RandomFieldID')[0],'events'));
console.dir($('#elmId').data('events'));
console.log('bound events: ',$._data($('body')[0],'events'));

但那没有任何结果.

因为这是基于框架的库上的库我甚至不确定从哪里开始尝试找到显然已经绑定到这些字段的东西,或者即使它是被绑定的字段或完全不同的字段. ..

所以,关于如何调试神秘绑定的javascript事件的好策略的任何建议(有多个JS库和框架,在问题解决之前不能只是注释掉,因为它们依赖于甚至让HTML出现在页面在第一位)?

并且,不幸的是我不能做一个jsfiddle或者其他什么,因为,正如我所说,这是在应用程序内深处,我基本上必须重新创建JSFiddle内部的应用程序(不可能)链接到一个示例(和,它不是在一个面向外部的网站,所以,我不能只在生产中链接到它.

我很难过.谢谢你的帮助!

最佳答案
以下是我使用Chrome的方式.

> Ctrl-Shift-J打开Javascript控制台.
>单击左下角的小放大镜,可以使用鼠标选择元素.

>单击页面上的一个元素(它将在您进入时突出显示.)它将在底部的DOM中突出显示,并在右下方显示一组属性.
>在右下角,一直到CSS属性,然后到事件监听器:

>选择您感兴趣的事件监听器.它将显示绑定函数以及将执行哪个脚本的确切代码行.这应该告诉你什么库正在做你疯狂的事情.

与FireBug和IE开发人员工具相比,我发现Chrome调试器功能更强大,速度更快(不会滞后).强烈推荐:)

猜你在找的jQuery相关文章