如何使用Firebug（或类似工具）调试JavaScript / jQuery事件绑定

我需要调试一个使用jQuery来执行一些相当复杂和混乱的DOM操作的Web应用程序。 有一段时间，某些与特定元素相关的事件不会被解雇，而只是停止工作。

如果我有能力编辑应用程序源代码，那么我会深入研究并添加一堆Firebug console.log()语句和注释/取消注释代码片段，以试图找出问题所在。 但是让我们假设我无法编辑应用程序代码，并需要使用Firebug或类似工具在Firefox中完全工作。

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

任何建议或想法？ 理想情况下，我只想查看和编辑绑定到元素的事件，与我今天编辑DOM的方式类似。

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

简而言之，假设某个事件处理程序附加到您的元素（例如）： $('#foo').click(function() { console.log('clicked!') });

你像这样检查它：

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

var clickEvents = $('#foo').data("events").click;
jQuery.each(clickEvents, function(key, handlerObj) {
  console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"
})

请参阅jQuery.fn.data （其中jQuery在内部存储您的处理程序）。

var clickEvents = $._data($('#foo')[0], "events").click;
jQuery.each(clickEvents, function(key, handlerObj) {
  console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"
})

有一个名为Visual Event的书签，可以显示附加到元素的所有事件。 它为不同类型的事件（鼠标，键盘等）提供了颜色编码的突出显示。 当您将鼠标悬停在它们上方时，它会显示事件处理程序的主体，它如何连接以及文件/行号（在WebKit和Opera上）。 您也可以手动触发事件。

它无法找到每个事件，因为没有标准的方法来查找附加到元素的事件处理程序，但它可以与流行的库（如jQuery，Prototype，MooTools，YUI等）一起使用。

Eventbug扩展已于昨天发布，请参阅：http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/

上一篇: How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)

下一篇: Best way to remove an event handler in jQuery?