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

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

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

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


当前回答

在最新的Chrome (v29)中使用DevTools,我发现这两个技巧对调试事件非常有帮助:

列出最后选择的DOM元素的jQuery事件 检查页面上的元素 在控制台中输入以下内容: 美元。_data($0, "events") //假设jQuery 1.7+ 它将列出所有与之相关的jQuery事件对象,展开感兴趣的事件,右键单击“handler”属性的函数,并选择“Show function definition”。它将打开包含指定函数的文件。 使用monitorEvents()命令

其他回答

你可以使用FireQuery。它在Firebug的HTML选项卡中显示附加到DOM元素的任何事件。它还显示通过$.data附加到元素的任何数据。

根据这个线程,在Firebug中无法查看DOM元素上的侦听器附加了哪些事件。

看起来最好的方法是按照tj111的建议,或者右键单击HTML查看器中的元素,然后单击“Log Events”,这样就可以看到针对特定DOM元素触发了哪些事件。我想人们可以这样做,看看是什么事件触发了特定的函数。

jQuery在下面存储事件:

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

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

Firebug 2现在集成了DOM事件调试/检查。

在最新的Chrome (v29)中使用DevTools,我发现这两个技巧对调试事件非常有帮助:

列出最后选择的DOM元素的jQuery事件 检查页面上的元素 在控制台中输入以下内容: 美元。_data($0, "events") //假设jQuery 1.7+ 它将列出所有与之相关的jQuery事件对象,展开感兴趣的事件,右键单击“handler”属性的函数,并选择“Show function definition”。它将打开包含指定函数的文件。 使用monitorEvents()命令