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

13 浏览
0 Comments

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

我需要调试一个使用jQuery进行复杂且混乱的DOM操作的网页应用程序。在某一点上，绑定到特定元素上的一些事件无法触发，甚至停止工作。

如果我能编辑应用程序源代码，我会深入挖掘并添加许多Firebug console.log()语句，并注释/取消注释代码块，以尝试精确定位问题所在。但是，假设我不能编辑应用程序代码，并需要完全使用Firefox和Firebug或类似工具进行工作。

Firebug非常擅长让我浏览和操作DOM。但到目前为止，我还没有找到如何使用Firebug进行事件调试。具体来说，我只想在给定时间内（使用Firebug JavaScript断点跟踪更改）查看绑定到特定元素上的事件处理程序列表。但是，无论是Firebug没有查看绑定事件的能力，还是我太蠢找不到它。 🙂

有什么建议或想法吗？理想情况下，我只想看到并编辑绑定到元素上的事件，就像我今天可以编辑DOM一样。

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

有一款很好用的书签工具叫做Visual Event，可以展示元素所连接的所有事件。不同类型的事件（鼠标、键盘等）有不同的颜色标记。当鼠标悬停在标记上时，可以展示事件处理函数的体和被连接的方式，以及文件/行号（在WebKit和Opera浏览器上）。还可以手动触发事件。

由于没有标准化的方式查询元素连接的事件，Visual Event无法找出所有事件。但是，它可以适用于流行的JavaScript库，如jQuery、Prototype、MooTools、YUI等。

0
0 Comments

查看如何在 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!') }"
})

0