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

请参阅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) // 打印 "function() { console.log('clicked!') }" })

jQuery 1.4.x var clickEvents = $('#foo').data("events").click; jQuery.each(clickEvents, function(key, handlerObj) { console.log(handlerObj.handler) // 打印 "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) // 打印 "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 等中找到）允许您查看元素的附加事件。

More detail in this Stack Overflow question

---

在 jquery 1.7+ 中使用 $._data(htmlElement, "events")；

前任：

$._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，我发现这两个技巧对调试事件非常有帮助：

列出最后选择的 DOM 元素的 jQuery 事件 检查页面上的元素在控制台中键入以下内容： $._data($0, "events") //假设 jQuery 1.7+ 它将列出与其关联的所有 jQuery 事件对象，展开感兴趣的事件，右键单击“处理程序”属性的函数并选择“显示函数定义”。它将打开包含指定函数的文件。使用 monitorEvents() 命令

---

看起来 FireBug 工作人员正在开发 EventBug 扩展。它将向 FireBug - 事件添加另一个面板。

“事件面板将列出页面上按事件类型分组的所有事件处理程序。对于每种事件类型，您可以打开以查看侦听器绑定到的元素以及函数源的摘要。” EventBug Rising

虽然他们现在不能说什么时候发布。

---

我还在 chrome 商店中找到了 jQuery Debugger。您可以单击一个 dom 项目，它将显示绑定到它的所有事件以及回调函数。我正在调试一个没有正确删除事件的应用程序，这有助于我在几分钟内找到它。显然这是针对chrome，而不是firefox。

---

元素旁边的ev 图标

在 Firefox 开发者工具的 Inspector 面板中列出了绑定到一个元素的所有事件。

首先使用 Ctrl + Shift + C 选择一个元素，例如 Stack Overflow 的 upvote 箭头。

单击元素右侧的 ev 图标，将打开一个对话框：

https://i.stack.imgur.com/9QYSA.png

单击所需事件的暂停符号 || 符号，这将打开处理程序行上的调试器。

现在，您可以像往常一样在调试器中放置断点，方法是单击该行的左边距。

这在以下位置有所提及：https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

不幸的是，我找不到一种方法让它与漂亮化很好地配合，它似乎只是在缩小的行处打开：How to beautify Javascript and CSS in Firefox / Firebug?

在 Firefox 42 上测试。

---

根据 this thread，Firebug 无法查看附加到 DOM 元素上的侦听器的事件。

看起来您可以做的最好的事情是 tj111 建议的内容，或者您可以右键单击 HTML 查看器中的元素，然后单击“记录事件”，这样您就可以看到针对特定 DOM 元素触发了哪些事件。我想可以这样做以查看哪些事件可以触发特定功能。

---

在 2.0 版中，Firebug 引入了一个 Events panel，它列出了当前在 HTML panel 中选择的元素的所有事件。

https://i.stack.imgur.com/p9fUo.png

如果选中了选项 Show Wrapped Listeners，它还可以显示包装到 jQuery 事件绑定中的事件侦听器，您可以通过 Events panel's options menu 访问该选项。

使用该面板，调试事件处理程序的工作流程如下：

选择带有要调试的事件侦听器的元素在事件侧面板中右键单击相关事件下的函数并选择设置断点触发事件

=> 脚本执行将在事件处理函数的第一行停止，您可以对其进行单步调试。

---

Firebug 2 现在确实包含 DOM 事件调试/检查。

---