如何调试JavaScript / jQuery事件绑定与Firebug或类似的工具?

我需要调试一个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()命令

2013-09-03 22:49:53

其他回答

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

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

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

2009-10-28 13:35:02

元素旁边的Ev图标

在Firefox开发人员工具的检查面板中列出了绑定到元素的所有事件。

首先用Ctrl + Shift + C选择一个元素，例如Stack Overflow的upvote箭头。

点击元素右侧的ev图标，会打开一个对话框:

单击所需事件的暂停符号||符号，这将在处理程序所在行打开调试器。

现在，您可以像往常一样在调试器中设置断点，只需单击该行的左侧空白即可。