javascript - 如何调试JavaScript / jQuery事件绑定, 具有Firebug ( 或者类似工具)

  显示原文与译文双语对照的内容

我需要调试一个使用jQuery的web应用程序来做一些相当复杂和混乱的DOM 操作。 在某一点上,某些绑定到特定元素的事件不会被激发,只是停止工作。

如果我有能力编辑应用程序源代码,我会向下钻取并添加一组 Firebugconsole.log() 语句和注释/注释代码 Fragment,以尝试查明问题。 但是,假设我不能编辑应用程序代码,需要使用Firebug或者类似工具完全在 Firefox 中工作。

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

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

时间:

参见如何在一个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 web ( 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!') }"
    })
    
    

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

就像同事建议的,console.log> 警告:


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

jQuery将事件存储在以下位置:


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

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

...