我需要调试一个web应用程序,使用jQuery做一些相当复杂和混乱的DOM操作。在某一时刻,一些绑定到特定元素的事件没有触发,只是停止工作。

如果我有编辑应用程序源代码的能力,我将深入并添加一堆Firebug console.log()语句和注释/取消注释代码段,以试图查明问题。但是让我们假设我不能编辑应用程序代码,并且需要使用Firebug或类似的工具完全在Firefox中工作。

Firebug非常擅长让我导航和操作DOM。不过,到目前为止,我还没有弄清楚如何使用Firebug进行事件调试。具体来说,我只想看到在给定时间绑定到特定元素的事件处理程序列表(使用Firebug JavaScript断点跟踪更改)。但是,要么Firebug没有看到绑定事件的能力,要么我太笨了,找不到它。: -)

有什么建议或想法吗?理想情况下,我只希望查看和编辑绑定到元素的事件,类似于我现在编辑DOM的方式。


当前回答

jQuery在下面存储事件:

$("a#somefoo").data("events")

执行console.log($("a#somefoo").data("events"))应该列出附加到该元素的事件。

其他回答

jQuery在下面存储事件:

$("a#somefoo").data("events")

执行console.log($("a#somefoo").data("events"))应该列出附加到该元素的事件。

使用美元。_data(htmlElement,“事件”)在jquery 1.7+;

ex:

美元。_data(文档,“事件”)或._data美元($ (' .class_name ') . get(0),“事件”)

看起来FireBug团队正在开发EventBug扩展。它将在FireBug - Events中添加另一个面板。

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

虽然他们现在还不能说什么时候会发布。

参见如何在DOM节点上查找事件侦听器。

简而言之,假设在某一点上一个事件处理程序附加到你的元素(例如):$('#foo').click(function() {console.log('clicked!')});

你这样检查它:

jQuery 1.3.x var clickEvents = $('#foo').data("events").click; jQuery。每个(点击事件,函数(键,值){ Console.log (value) //打印"function() {Console.log ('clicked!')}" }) jQuery 1.4.x var clickEvents = $('#foo').data("events").click; jQuery。每个(点击事件,函数(键,handlerObj) { console.log(handlerObj.handler) //打印"function() {console.log('clicked!')}" })

参见jQuery.fn.data (jQuery内部存储处理程序的地方)。

jQuery 1.8.x var clickEvents = $ ._data($(“# foo”)[0],“事件”).click; jQuery。每个(点击事件,函数(键,handlerObj) { console.log(handlerObj.handler) //打印"function() {console.log('clicked!')}" })

WebKit开发控制台(可以在Chrome、Safari等中找到)允许您查看元素的附加事件。

有关堆栈溢出问题的更多详细信息