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

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

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

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


当前回答

有一个很好的书签工具叫做Visual Event,它可以显示附加到元素上的所有事件。它为不同类型的事件(鼠标、键盘等)提供了颜色编码的高亮显示。当你将鼠标悬停在它们上时,它会显示事件处理程序的主体,它是如何附加的,以及文件/行号(在WebKit和Opera上)。您也可以手动触发该事件。

它不能找到每个事件,因为没有标准的方法来查找附加到元素上的事件处理程序,但它与jQuery、Prototype、MooTools、YUI等流行库一起工作。

其他回答

我还在chrome商店里找到了jQuery调试器。您可以单击一个dom项,它将显示所有绑定到该dom项的事件以及回调函数。我正在调试一个事件没有被正确删除的应用程序,这帮助我在几分钟内追踪到它。显然这是针对chrome,而不是firefox。

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

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

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

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

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

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

在2.0版本中,Firebug引入了一个事件面板,它列出了HTML面板中当前选择的元素的所有事件。

它还可以显示包装成jQuery事件绑定的事件侦听器,如果选中了Show wrapped listeners选项,您可以通过事件面板的选项菜单获得该选项。

使用该面板,调试事件处理程序的工作流如下所示:

选择带有要调试的事件侦听器的元素 在Events侧面板中,右键单击相关事件下的函数,并选择Set Breakpoint 触发事件

脚本执行将在事件处理程序函数的第一行停止,您可以逐步调试它。