小编典典

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

all

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

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

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

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


阅读 91

收藏
2022-03-06

共1个答案

小编典典

简而言之,假设某个事件处理程序附加到您的元素(例如):$('#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!’) }”
    })

2022-03-06