6

我正在开发一个非常复杂的 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 内重新创建应用程序（不可能）以链接到一个示例（和，它不在面向外部的站点中，所以我不能在生产中直接链接到它）。

我难住了。

4

1 回答 1

11

这是我使用 Chrome 的方法。

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

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

    点击放大镜

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

  4. 在右下角一直经过 CSS 属性和事件监听器：

    ？？？

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

    利润！

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

于 2013-03-03T00:18:06.647 回答