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

我需要调试一个使用jQuery的Web应用程序来做一些相当复杂和混乱的DOM操作.有一次,某些与特定元素绑定的事件不会被触发,只是停止工作.

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

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

任何建议或想法？理想情况下,我只想查看和编辑绑定到元素的事件,类似于今天我可以编辑DOM的方式.

1> Crescent Fre..：

---

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

---

仅供参考:这不会显示未附加jQuery的事件

---

@thepeer我个人更喜欢在文件开头检查控制台,如果不存在则创建一个虚拟对象.

---

完全同意console.log(),但它应该用`if(window.console)`进行对冲,以防它在代码中留下(比使用alert()更容易)并打破IE.

---

@ BrainSlugs83:在这个答案中看到链接的答案.(tl;博士:你不能).

2> Matthew Crum..：

---

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

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

---

请注意,由于它在内容JavaScript中运行,因此它通过查询JavaScript库来获取其数据.所以它只会显示添加了受支持的库(包括jQuery)的事件.

3> Shrikant Sha..：

---

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

4> James..：

---

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

$.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('
' + element.nodeName + ': 
' + data + '<\/pre>');
});


Src :(我的博客) - > http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

        

5> Cristian San..：
WebKit开发者控制台(可在Chrome,Safari等中找到)允许您查看元素的附加事件.

此Stack Overflow问题中的更多详细信息

        
对于Firefox,说明是[在MDN上](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners) 

6> Tamás Pap..：
$._data(htmlElement, "events")在jquery 1.7+中使用;

例如:

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

        

7> 小智..：
正如同事建议的那样,console.log> alert:

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

        

8> Alex Heyd..：
jQuery将事件存储在以下内容中:

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


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

        

9> mateuscb..：
在最新的Chrome(v29)中使用DevTools,我发现这两个提示对于调试事件非常有用:


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

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



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

  
它将列出与之关联的所有jQuery事件对象,展开感兴趣的事件,右键单击"handler"属性的函数并选择"Show function definition".它将打开包含指定函数的文件.
  


使用monitorEvents()命令