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

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

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

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

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

当前回答

正如同事建议的，console.log > alert:

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

2009-11-18 16:31:20

其他回答

参见如何在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!')}" })

2009-02-20 20:21:09

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

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

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

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

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

2015-01-15 22:33:31

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

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

2009-02-20 20:03:29

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

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