如何调试JavaScript / jQuery事件绑定与Firebug或类似的工具?

我需要调试一个web应用程序，使用jQuery做一些相当复杂和混乱的DOM操作。在某一时刻，一些绑定到特定元素的事件没有触发，只是停止工作。

如果我有编辑应用程序源代码的能力，我将深入并添加一堆Firebug console.log()语句和注释/取消注释代码段，以试图查明问题。但是让我们假设我不能编辑应用程序代码，并且需要使用Firebug或类似的工具完全在Firefox中工作。

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

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

当前回答

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

2012-04-27 16:15:35

其他回答

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

它还可以显示包装成jQuery事件绑定的事件侦听器，如果选中了Show wrapped listeners选项，您可以通过事件面板的选项菜单获得该选项。

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

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

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

2015-01-15 22:33:31

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

2009-10-07 03:26:22

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

$.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/

2009-02-20 21:04:56

元素旁边的Ev图标

在Firefox开发人员工具的检查面板中列出了绑定到元素的所有事件。

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

点击元素右侧的ev图标，会打开一个对话框:

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

现在，您可以像往常一样在调试器中设置断点，只需单击该行的左侧空白即可。

这是在https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners上提到的

不幸的是，我找不到一种方法来很好地发挥美化，它似乎只是在缩小线:如何美化Javascript和CSS在Firefox / Firebug?

在Firefox 42上测试。

2015-11-17 10:40:02