javascript - 我如何找到神秘绑定(bind)的 Javascript 事件

Question

我正在开发一个非常复杂的 HTML5 应用程序(主干、 Marionette 、jQuery、下划线、 Handlebars 、 Bootstrap 等)，在应用程序的深处是一个带有表单的模式弹出窗口。

当模式弹出时，当您第一次单击任何表单域时，表单域会自行取消选择。第一次单击后，您可以正常使用该表单。当应用程序最终加载到生产中的 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'));

但这并没有产生任何结果。

由于这是框架之上的库之上的框架之上的库，我什至不确定从哪里开始尝试寻找显然已将自身绑定(bind)到这些字段的东西，或者即使它是被绑定(bind)到的字段或其他东西否则完全...

因此，关于如何调试神秘绑定(bind)的 Javascript 事件的好策略的任何建议(具有多个 JS 库和框架，在问题解决之前不能仅仅注释掉它们，因为它们甚至依赖于获取 HTML出现在页面的第一位)？

而且，不幸的是我不能做 jsfiddle 或其他东西，因为正如我所说，这是应用程序的深处，我基本上必须在 JSFiddle 中重新创建应用程序(不可能)以链接到示例(而且，它不在面向外部的站点中，因此，我不能在生产环境中直接链接到它)。

我很难过。

Answer 1

以下是我使用 Chrome 的方法。

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

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

   

3. 单击页面上的一个元素(它会在您转到它时突出显示。)它会在底部的 DOM 中突出显示并在右下角显示一堆属性。

4. 在右下角一直到 CSS 属性和事件监听器:

   

5. 选择您感兴趣的事件监听器。它将向您显示绑定(bind)函数以及将执行的脚本中的确切代码行。那应该告诉您哪个图书馆在做您疯狂的事情。

   

与 FireBug 和 IE 开发人员工具相比，我发现 Chrome 调试器更强大、更快速(不滞后)。强烈推荐:)