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

Question

如何使用Firebug或类似工具调试JavaScript/jQuery事件绑定？我需要调试一个使用jQuery来做一些相当复杂和混乱的web应用程序。多姆操纵。有一段时间，一些绑定到特定元素的事件没有触发，只是停止工作。如果我有能力编辑应用程序源代码，我将向下钻取并添加一组火虫 console.log()语句和注释/取消注释代码片段，试图找出问题所在。但是，让我们假设我不能编辑应用程序代码，需要使用Firebug或类似工具完全在Firefox中工作。Firebug非常擅长于让我导航和操作DOM。不过，到目前为止，我还没有弄清楚如何使用Firebug进行事件调试。具体来说，我只想看到在给定时间绑定到特定元素的事件处理程序列表(使用Firebug JavaScript断点跟踪更改)。但是，Firebug不具备查看绑定事件的能力，或者我太笨，找不到它。*-)有什么建议或想法吗？理想情况下，我只想看到和编辑绑定到元素的事件，就像我今天如何编辑DOM一样。

Answer 1

看见如何在DOM节点上查找事件侦听器.

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

你这样检查它：

• jQuery 1.3.x

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

• jQuery 1.4.x

  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在内部存储处理程序)。

• jQuery 1.8.x

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

Answer 2

有个不错的书签叫视觉事件它可以显示附加到元素的所有事件。它为不同类型的事件(鼠标、键盘等)提供了彩色编码的高光。当您悬停在它们上时，它会显示事件处理程序的主体、它是如何附加的，以及文件/行号(在WebKit和Opera上)。还可以手动触发事件。

它不能找到每个事件，因为没有标准的方法来查找附加到元素上的事件处理程序，但是它可以使用流行的库，如jQuery、Protools、MooTools、YUI等等。

Answer 3

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