如何使用Firebug或类似工具调试JavaScript / jQuery事件绑定？ [英] How to debug JavaScript / jQuery event bindings with Firebug or similar tools?

问题描述

我需要调试一个使用jQuery的web应用程序来做一些相当复杂和混乱的 DOM 操纵。有一段时间，某些绑定到特定元素的事件不会被触发，只是停止工作。

I need to debug a web application that uses jQuery to do some fairly complex and messy DOM manipulation. At one point, some of the events that were bound to particular elements, are not fired and simply stop working.

如果我有能力编辑应用程序源，我将向下钻取并添加一堆 Firebug 控制台。 log（）语句和注释/取消注释代码片段以试图查明问题。但是我们假设我无法编辑应用程序代码，需要使用Firebug或类似工具完全在Firefox中工作。

If I had a capability to edit the application source, I would drill down and add a bunch of Firebug console.log() statements and comment/uncomment pieces of code to try to pinpoint the problem. But let's assume I cannot edit the application code and need to work entirely in Firefox using Firebug or similar tools.

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

Firebug is very good at letting me navigate and manipulate the DOM. So far, though, I have not been able to figure out how to do event debugging with Firebug. Specifically, I just want to see a list of event handlers bound to a particular element at a given time (using Firebug JavaScript breakpoints to trace the changes). But either Firebug does not have the capability to see bound events, or I'm too dumb to find it. :-)

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

Any recommendations or ideas? Ideally, I would just like to see and edit events bound to elements, similarly to how I can edit DOM today.

推荐答案

参见如何在DOM节点上查找事件侦听器。

简而言之，假设某个事件处理程序附加到您的元素上（例如）： $（'＃foo '）。click（function（）{console.log（'clicked！'）}）;

In a nutshell, assuming at some point an event handler is attached to your element (eg): $('#foo').click(function() { console.log('clicked!') });

你这样检查：

• jQuery 1.3.x

• 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

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存储你的处理程序内部）。

See jQuery.fn.data (where jQuery stores your handler internally).

• jQuery 1.8.x

• 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!') }"
})

这篇关于如何使用Firebug或类似工具调试JavaScript / jQuery事件绑定？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！