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

我需要调试一个使用 jQuery 执行一些相当复杂和混乱的 Web 应用程序DOM http://en.wikipedia.org/wiki/Document_Object_Model操纵。在某一时刻，一些绑定到特定元素的事件不会被触发，而是停止工作。

如果我有能力编辑应用程序源代码，我会深入研究并添加一堆Firebug http://en.wikipedia.org/wiki/Firebug_%28software%29 console.log()语句并注释/取消注释代码片段以尝试查明问题。但假设我无法编辑应用程序代码，需要使用 Firebug 或类似工具完全在 Firefox 中工作。

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

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

See 如何在 DOM 节点上查找事件侦听器 https://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node/447106#447106.

简而言之，假设在某个时刻有一个事件处理程序附加到您的元素（例如）：$('#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!') }"
  })
  

See jQuery.fn.data http://docs.jquery.com/Core/data#name（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!') }"
  })