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

Question

我需要调试一个使用 jQuery 来做一些相当复杂和困惑的 Web 应用程序 DOM操纵。有一次，一些绑定(bind)到特定元素的事件没有被触发，只是停止工作。

如果我有能力编辑应用程序源代码，我会向下钻取并添加一堆 Firebug console.log() 语句和注释/取消注释代码片段以尝试查明问题。但假设我无法编辑应用程序代码，需要使用 Firebug 或类似工具完全在 Firefox 中工作。

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

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

Answer 1

参见 How to find event listeners on a DOM node .

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