Question

我需要调试一个使用jQuery的web应用程序来执行一些相当复杂和混乱的DOM操作。有一段时间，某些与特定元素绑定的事件不会被触发，只是停止工作。

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

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

任何建议或想法？理想情况下，我只想查看和编辑绑定到元素的事件，类似于今天编辑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!') }"
})

Answer 2

有一个名为Visual Event的精美书签，可以显示附加到元素的所有事件。它为不同类型的事件（鼠标，键盘等）提供了颜色编码的高光。当您将鼠标悬停在它们上方时，它会显示事件处理程序的主体，它的附加方式以及文件/行号（在WebKit和Opera上）。您也可以手动触发事件。

它无法找到每个事件，因为没有标准的方法来查找哪些事件处理程序附加到元素，但它适用于流行的库，如jQuery，Prototype，MooTools，YUI等。

Answer 3

您可以使用FireQuery。它显示Firebug的HTML选项卡中附加到DOM元素的任何事件。它还会显示通过$.data附加到元素的所有数据。

Answer 4

这是一个插件，可以列出任何给定元素/事件的所有事件处理程序：

$.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 :(我的博客） - ＆gt; http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

Answer 5

WebKit开发者控制台（可在Chrome，Safari等中找到）可让您查看元素的附加事件。

More detail in this Stack Overflow question

Answer 6

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

例如：

$._data(document, "events")或$._data($('.class_name').get(0), "events")

Answer 7

正如同事建议的那样，console.log＆gt;提醒：

var clickEvents = $('#foo').data("events").click;
jQuery.each(clickEvents, function(key, value) {
    console.log(value);
})

Answer 8

jQuery将事件存储在以下内容中：

$("a#somefoo").data("events")

执行console.log($("a#somefoo").data("events"))应列出附加到该元素的事件。

Answer 9

在最新的Chrome（v29）中使用DevTools，我发现这两个提示非常有助于调试事件：

列出last selected DOM element的jQuery事件
- 检查页面上的元素
- 在控制台中输入以下内容：
  
  $ ._ data（$0，“events”）//假设jQuery 1.7 +
- 它将列出与之关联的所有jQuery事件对象，展开感兴趣的事件，右键单击“handler”属性的函数并选择“Show function definition”。它将打开包含指定函数的文件。
使用monitorEvents（）命令

Answer 10

看起来FireBug工作人员正在使用EventBug扩展程序。它将为FireBug添加另一个面板 - 事件。

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

虽然现在还不能说它会被释放。

Answer 11

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

Answer 12

元素旁边的

ev图标

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

首先选择一个元素，其中 Ctrl + Shift + C ，例如Stack Overflow＆＃39; s upvote arrow。

点击元素右侧的ev图标，打开对话框：

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

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

在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上测试。

Answer 13

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

您可以做的最好的事情是tj111建议的，或者您可以右键单击HTML查看器中的元素，然后单击“日志事件”，以便您可以查看针对特定DOM元素触发的事件。我想人们可以做到这一点，看看可以触发特定功能的事件。

Answer 14

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

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

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

选择包含要调试的事件侦听器的元素
在事件侧面板内右键单击相关事件下的功能，然后选择设置断点
触发事件

=＆GT;脚本执行将在事件处理函数的第一行停止，您可以逐步调试它。

Answer 15

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

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

15 个答案: