Chrome 中的 jQuery 事件调试答案

【问题标题】：jQuery event debugging in ChromeChrome 中的 jQuery 事件调试
【发布时间】：2012-06-24 17:01:30
【问题描述】：

我们有一个 JS 密集型 Web 应用程序，主要基于 jQuery 的 live 绑定（事实上，我们在 jQuery v1.7 之前就一直在做这个）。

Chrome 的内置开发工具很棒，但是有一个问题一直在发生，我总是发现几乎不可能用它们进行调试：有时我的 live 处理程序不会因为早期的处理程序停止事件而被调用冒泡。

有什么方法可以告诉 Chrome（或者实际上是 Firebug 或其他扩展程序或小书签（最好是免费的！））在 jQuery 库代码之外的下一个事件处理程序上中断。这样我可以简单地单击按钮并查看触发的事件，单步执行并查看我何时意外停止传播？

如果没有，是否有充分的理由不这样做？这个可以吗？

【问题讨论】：

标签： jquery debugging google-chrome

【解决方案1】：

在 Chrome DevTools 中，您可以按事件类型设置断点：

https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints#listeners

你不能排除 jQuery 事件。

顺便说一句，您应该使用 delegate 而不是 live()

【讨论】：

我已经尝试过这个并且正在苦苦挣扎。这将只是进入 jQuery 库的代码。我似乎找不到调用（或应用）你给它的事件函数的 jQuery 库部分。我认为更改为 delegate 也没有任何好处，因为它们都需要位于 DOM 树的顶部（可能很少有人不需要）。此外，这两个功能现在都已弃用。有时间的话，我们会搬到on
delegate 已被弃用，已被“on”取代
自从编写此线程以来，DevTools 团队还引入了黑盒脚本的功能，这对处理此类事情非常有帮助。见developer.chrome.com/devtools/docs/blackboxing

【解决方案2】：

您可能会发现这很有用：http://www.sprymedia.co.uk/article/Visual+Event+2

名为 Visual Event 的 JavaScript 小书签，它直观地显示页面上订阅了事件的元素、这些事件是什么以及事件触发时将运行的功能...

事实证明，W3C 推荐的 DOM 接口没有提供标准方法来找出哪些事件侦听器附加到特定节点....因此，我们不得不查看各个 Javascript 库，这通常是维护附加事件的缓存（以便以后可以删除它们并执行其他有用的抽象）。

【讨论】：

【解决方案3】：

除 DG 响应外，这是 Visual Event 的Chrome Extension。完美运行

【讨论】：