如何使用Firebug或类似工具调试JavaScript / jQuery事件绑定？

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

我需要调试一个使用jQuery进行一些相当复杂和混乱的DOM操作的Web应用程序。某一时刻，某些与特定元素绑定的事件并未触发，只是停止工作。

如果我有能力编辑应用程序源代码，那么我将向下钻取并添加一堆Firebug console.log()语句和注释/取消注释代码段以尝试找出问题所在。但是，假设我无法编辑应用程序代码，并且需要使用Firebug或类似工具完全在Firefox中工作。

Firebug非常擅长让我浏览和操作DOM。不过，到目前为止，我还无法弄清楚如何使用Firebug进行事件调试。具体来说，我只想查看在给定时间绑定到特定元素的事件处理程序的列表（使用Firebug JavaScript断点来跟踪更改）。但是Firebug无法查看绑定事件，或者我太笨了，找不到它。 :-)

有什么建议或想法吗？理想情况下，我只想查看和编辑绑定到元素的事件，就像今天编辑DOM一样。

#1楼

我还在Chrome存储区中找到了jQuery Debugger 。您可以单击一个dom项目，它将显示绑定到它的所有事件以及回调函数。我正在调试无法正确删除事件的应用程序，这帮助我在几分钟内找到了问题。显然，这是针对Chrome的，不是针对Firefox的。

#2楼

在jQuery 1.7+中使用$._data(htmlElement, "events") ;

例如：

$._data(document, "events")或$._data($('.class_name').get(0), "events")

#3楼

您可以使用FireQuery 。它显示了Firebug的HTML标签中与DOM元素相关的所有事件。它还显示通过$.data附加到元素的任何数据。

#4楼

看起来FireBug小组正在研究EventBug扩展。它将在FireBug-Events中添加另一个面板。

“事件面板将按事件类型分组列出页面上的所有事件处理程序。对于每种事件类型，您都可以打开以查看侦听器所绑定的元素以及函数源的摘要。” EventBug上升

尽管他们现在无法说出何时发布。

#5楼

正如一位同事建议的那样，console.log>警报：

var clickEvents = $('#foo').data("events").click;
jQuery.each(clickEvents, function(key, value) {
    console.log(value);
})

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3152388

标签

jquery

firebug