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

Question

我有一个非常复杂的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内部的应用程序（不可能）链接到示例（并且，它不在外部对象站点中，所以，我不能只在生产中链接到它）。

我很难过。谢谢你的帮助！

Answer 1

以下是我使用Chrome的方式。

1. Ctrl-Shift-J打开Javascript控制台。

2. 点击左下角的小放大镜，可以用鼠标选择一个元素。

   

3. 点击页面上的一个元素（当你转到它时它会突出显示。）它会在底部的DOM中突出显示，并在右下角显示一堆属性。

4. 在右下角一直走过CSS属性，然后到事件监听器：

   

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

   

与FireBug和IE开发人员工具相比，我发现Chrome调试器功能更强大，速度更快（不滞后）。强烈推荐：）