我需要调试一个 Web 应用程序，该应用程序使用 jQuery 来执行一些相当复杂和凌乱的DOM操作。在某一时刻，一些绑定到特定元素的事件不会被触发而只是停止工作。
如果我有能力编辑应用程序源代码，我会深入研究并添加一堆Firebug console.log()语句和注释/取消注释代码片段，以尝试查明问题。但是让我们假设我无法编辑应用程序代码并且需要使用 Firebug 或类似工具在 Firefox 中完全工作。
Firebug 非常擅长让我导航和操作 DOM。不过，到目前为止，我还没有弄清楚如何使用 Firebug 进行事件调试。具体来说，我只想查看在给定时间绑定到特定元素的事件处理程序列表（使用 Firebug JavaScript 断点来跟踪更改）。但是，要么 Firebug 无法查看绑定事件，要么我太笨了找不到它。:-)
有什么建议或想法吗？理想情况下，我只想查看和编辑绑定到元素的事件，类似于我今天编辑 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!') }"
})
有一个名为Visual Event的不错的书签，它可以向您显示附加到一个元素的所有事件。它具有针对不同类型事件（鼠标、键盘等）的颜色编码突出显示。当您将鼠标悬停在它们上方时，它会显示事件处理程序的主体、它的附加方式以及文件/行号（在 WebKit 和 Opera 上）。您也可以手动触发事件。
它无法找到每个事件，因为没有标准方法来查找附加到元素的事件处理程序，但它可以与流行的库一起使用，例如 jQuery、Prototype、MooTools、YUI 等。
您可以使用FireQuery。它在 Firebug 的 HTML 选项卡中显示附加到 DOM 元素的任何事件。它还显示通过 附加到元素的任何数据$.data。
这是一个插件，它可以列出任何给定元素/事件的所有事件处理程序：
$.fn.listHandlers = function(events, outputFunction) {
return this.each(function(i){
var elem = this,
dEvents = $(this).data('events');
if (!dEvents) {return;}
$.each(dEvents, function(name, handler){
if((new RegExp('^(' + (events === '*' ? '.+' : events.replace(',','|').replace(/^on/i,'')) + ')$' ,'i')).test(name)) {
$.each(handler, function(i,handler){
outputFunction(elem, '\n' + i + ': [' + name + '] : ' + handler );
});
}
});
});
};
像这样使用它：
// List all onclick handlers of all anchor elements:
$('a').listHandlers('onclick', console.info);
// List all handlers for all events of all elements:
$('*').listHandlers('*', console.info);
// Write a custom output function:
$('#whatever').listHandlers('click',function(element,data){
$('body').prepend('<br />' + element.nodeName + ': <br /><pre>' + data + '<\/pre>');
});
源代码：（我的博客）-> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/
WebKit 开发人员控制台（可在 Chrome、Safari 等中找到）允许您查看元素的附加事件。