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


609

我需要调试一个使用jQuery进行一些相当复杂和混乱的DOM操作的Web应用程序。某一时刻,某些与特定元素绑定的事件并未触发,只是停止工作。

如果我有能力编辑应用程序源代码,那么我将向下钻取并添加一堆Firebug console.log()语句和注释/取消注释代码段,以试图找出问题所在。但是,假设我无法编辑应用程序代码,并且需要使用Firebug或类似工具完全在Firefox中工作。

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

有什么建议或想法吗?理想情况下,我只想查看和编辑绑定到元素的事件,就像今天编辑DOM一样。

Answers:


355

请参阅如何在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!') }"
    })
    

21
仅供参考:这不会显示jQuery未附带的事件
Juan Mendes

10
完全同意console.log(),但是应该用一些类似的方法if (window.console)对付它,以防它遗留在代码中(比使用alert()容易得多)并破坏IE。
同行2012年

14
@thepeer我个人更喜欢在文件开头检查控制台,如果不存在,请创建一个虚拟对象。
安德鲁(Andrew)

以下是用于调试所有事件的类似代码段(请原谅缺少格式化的内容):$('#foo').click(function(event) { var events = $(this).data('events'); $.each(events, function(event, handlers) { $.each(handlers, function(key, handlerObj) { console.log("--------------------------------------"); console.log(event+"["+key+"] | "+handlerObj.handler) ; }); });
Corey O.

3
@ BrainSlugs83:请参阅此答案中的链接答案。(tl; dr:不能)。
月牙食

162

有一个很好的小书签,称为Visual Event,可以显示附加到元素的所有事件。它具有用于不同类型事件(鼠标,键盘等)的彩色高亮显示。当您将鼠标悬停在它们上方时,它将显示事件处理程序的主体,其附加方式以及文件/行号(在WebKit和Opera上)。您也可以手动触发事件。

它无法找到每个事件,因为没有标准的方法来查找将哪些事件处理程序附加到元素上,但是它可以与jQuery,Prototype,MooTools,YUI等流行的库一起使用。


8
请注意,由于它在内容JavaScript中运行,因此它通过查询JavaScript库来获取其数据。因此,它将仅显示使用支持的库(包括jQuery)添加的事件。
马修·弗莱申

41

您可以使用FireQuery。它显示了Firebug的HTML标签中与DOM元素相关的所有事件。它还显示通过附加到元素的任何数据$.data


1
该插件有1个很大的缺点:在调试时,如果要检查包含jquery集合的变量的值,则在代码暂停时将无法检查该值。这不是萤火虫的原因。我将其卸载的原因。一个人
Maarten Kieft

1
FireQuery似乎不再显示附加事件了:(
Matty J

26

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

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



11

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

例如:

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


8

正如一位同事建议的那样,console.log>警报:

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

6

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

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

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


5

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

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

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

      $ ._ data($ 0,“ events”)//假设jQuery 1.7+

    • 它将列出所有与之关联的jQuery事件对象,展开感兴趣的事件,右键单击“ handler”属性的功能,然后选择“ Show function definition”。它将打开包含指定功能的文件。

  2. 使用monitorEvents()命令


4

看起来FireBug小组正在研究EventBug扩展。它将在FireBug-Events中添加另一个面板。

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

尽管他们现在无法说出何时发布。


2
此功能已发布并包含在FireBug 2.0.1中。现在,当您检查页面上的HTML元素时,将出现一个新的“事件”面板,您可以在其中查看附加的事件及其处理程序。
derloopkat 2014年

4

我还在Chrome存储区中找到了jQuery Debugger。您可以单击一个dom项目,它将显示绑定到它的所有事件以及回调函数。我正在调试无法正确删除事件的应用程序,这帮助我在几分钟内找到了问题。显然,这是针对Chrome的,而不是针对Firefox的。


4

ev 元素旁边的图标

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

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

单击ev元素右侧的图标,然后将打开一个对话框:

活动工具提示

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

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

可以在以下网址中提及:https//developer.mozilla.org/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

不幸的是,我找不到一种可以与prettyfcation完美配合的方法,它似乎只是最小化了:如何在Firefox / Firebug中美化Javascript和CSS?

在Firefox 42上测试。


不幸的是,这对于定位继承的侦听器效果不佳。
chukko '16

3

根据此线程,Firebug中无法查看将哪些事件附加到DOM元素上的侦听器。

看来您可以做的最好是tj111的建议,或者您可以右键单击HTML查看器中的元素,然后单击“日志事件”,以便查看特定DOM元素触发了哪些事件。我想可以这样做,以查看可能触发特定功能的事件。


2

在2.0版中,Firebug引入了“ 事件”面板,该面板列出了HTML面板中当前所选元素的所有事件。

Firebug中的“事件”侧面板

如果选中了“ 显示包裹的侦听器 ”选项,它也可以显示包裹在jQuery事件绑定中的事件侦听,您可以通过“ 事件”面板的选项菜单进行访问

在该面板上,调试事件处理程序的工作流程如下:

  1. 选择要调试的事件侦听器的元素
  2. 在“ 事件”侧面板内,右键单击相关事件下的函数,然后选择“ 设置断点”
  3. 触发事件

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


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.