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

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

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

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

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

241400 次浏览
小开

有一个名为视觉事件的小书签，它可以向您显示附加到元素的所有事件。它为不同类型的事件(鼠标、键盘等)提供了颜色编码的高亮显示。当你将鼠标悬停在它们上时，它会显示事件处理程序的主体，它是如何附加的，以及文件/行号(在WebKit和Opera上)。您也可以手动触发该事件。

它不能找到每个事件，因为没有标准的方法来查找附加到元素上的事件处理程序，但它与jQuery、Prototype、MooTools、YUI等流行库一起工作。

小开

根据这个线程，在Firebug中没有办法查看DOM元素上的侦听器附加了什么事件。

看起来最好的方法是按照tj111的建议，或者右键单击HTML查看器中的元素，然后单击“Log Events”，这样就可以看到针对特定DOM元素触发了哪些事件。我想人们可以这样做，看看可以事件会触发特定的函数。

小开

jQuery在下面存储事件:

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

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

小开
最佳答案

看到# EYZ0。

简而言之，假设在某一点上事件处理程序附加到元素(例如):$('#foo').click(function() { console.log('clicked!') });

你这样检查它:

  • < p > 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!') }"
})

See jQuery.fn.data (where jQuery stores your handler internally).

  • 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!') }"
})
小开

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

$.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:(我的博客)- ># EYZ0

小开

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

小开

看起来FireBug团队正在开发EventBug扩展。它将在FireBug - Events中添加另一个面板。

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

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

小开

正如同事建议的，console.log > alert:

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

WebKit开发控制台(可以在Chrome、Safari等中找到)允许您查看元素的附加事件。

更多关于Stack Overflow问题的详细信息

小开

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

小开

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

例:

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

小开

在最新的Chrome (v29)中使用DevTools，我发现这两个技巧对调试事件非常有帮助:

  1. 列出最后选中DOM元素的jQuery事件

    • 检查页面上的元素
    • 在控制台中输入以下内容:

      美元。_data(0美元， "events") //假设jQuery 1.7+

    • 它将列出所有与之相关的jQuery事件对象，展开感兴趣的事件，右键单击“handler”属性的函数，并选择“Show function definition”。它将打开包含指定函数的文件。
      • < / ul > < / p > 李< /引用> < / >

    • 使用monitorEvents()命令

小开

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

小开

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

*Events* side panel in Firebug

它还可以显示包装成jQuery事件绑定的事件侦听器，如果选项显示包装的侦听器被选中，您可以通过事件面板的选项菜单到达。

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

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

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

小开

元素旁边的ev图标

在Firefox Developer Tools的检查员面板中列出了绑定到元素的所有事件。

首先选择一个带有Ctrl + 转变 + C的元素，例如Stack Overflow的upvote箭头。

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

events tooltip

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

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

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

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

在Firefox 42上测试。


提交答案