我需要调试一个使用 jQuery 进行一些相当复杂和混乱的DOM操作的 Web 应用程序。在某一时刻，一些绑定到特定元素的事件不会被触发，只是停止工作。
如果我有能力编辑应用程序源代码，我会向下钻取并添加一堆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>');
});
Src：（我的博客）-> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/
WebKit 开发者控制台（可在 Chrome、Safari 等中找到）允许您查看元素的附加事件。
$._data(htmlElement, "events")在 jquery 1.7+ 中使用；
前任：
$._data(document, "events")或者$._data($('.class_name').get(0), "events")
正如一位同事建议的那样，console.log > alert：
var clickEvents = $('#foo').data("events").click;
jQuery.each(clickEvents, function(key, value) {
console.log(value);
})
jQuery 将事件存储在以下位置：
$("a#somefoo").data("events")
做一个console.log($("a#somefoo").data("events"))应该列出附加到该元素的事件。
在最新的 Chrome (v29) 中使用 DevTools，我发现这两个技巧对调试事件非常有帮助：
$._data( $0 , "events") //假设 jQuery 1.7+
利用monitorEvents () 命令
看起来 FireBug 工作人员正在开发 EventBug 扩展。它将向 FireBug - 事件添加另一个面板。
“事件面板将列出页面上按事件类型分组的所有事件处理程序。对于每种事件类型，您可以打开以查看侦听器绑定到的元素以及函数源的摘要。” EventBug 上升
虽然他们现在不能说什么时候发布。
我还在 chrome 商店中找到了jQuery Debugger。您可以单击一个 dom 项目，它将显示绑定到它的所有事件以及回调函数。我正在调试一个没有正确删除事件的应用程序，这有助于我在几分钟内找到它。显然这是针对chrome，而不是firefox。
ev元素旁边的图标
在 Firefox 开发者工具的Inspector面板中列出了绑定到一个元素的所有事件。
首先选择一个带有Ctrl++的元素，例如 Stack Overflow 的 upvote 箭头Shift。C
单击ev元素右侧的图标，将打开一个对话框：
单击||所需事件的暂停符号符号，这将打开处理程序行上的调试器。
现在，您可以像往常一样在调试器中放置断点，方法是单击该行的左边距。
这在以下位置提到：https ://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners
不幸的是，我找不到一种方法让它与漂亮化很好地配合，它似乎只是在缩小的行处打开：如何在 Firefox / Firebug 中美化 Javascript 和 CSS？
在 Firefox 42 上测试。
根据这个线程，Firebug 无法查看哪些事件附加到 DOM 元素上的侦听器。
看起来您可以做的最好的事情是 tj111 建议的内容，或者您可以右键单击 HTML 查看器中的元素，然后单击“记录事件”，这样您就可以看到针对特定 DOM 元素触发了哪些事件。我想可以这样做以查看哪些事件可以触发特定功能。
Firebug 2现在确实包含 DOM 事件调试/检查。
