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

Question

I need to debug a web application that uses jQuery to do some fairly complex and messy DOM manipulation.(我需要调试一个使用jQuery进行一些相当复杂和混乱的DOM操作的Web应用程序。)

At one point, some of the events that were bound to particular elements, are not fired and simply stop working.(某一时刻，某些与特定元素绑定的事件并未触发，只是停止工作。)

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.(如果我有能力编辑应用程序源代码，那么我将向下钻取并添加一堆Firebug console.log()语句和注释/取消注释代码段以尝试找出问题所在。)

But let's assume I cannot edit the application code and need to work entirely in Firefox using Firebug or similar tools.(但是，假设我无法编辑应用程序代码，并且需要使用Firebug或类似工具完全在Firefox中工作。)

Firebug is very good at letting me navigate and manipulate the DOM.(Firebug非常擅长让我浏览和操作DOM。)

So far, though, I have not been able to figure out how to do event debugging with Firebug.(不过，到目前为止，我还无法弄清楚如何使用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).(具体来说，我只想查看在给定时间绑定到特定元素的事件处理程序的列表（使用Firebug JavaScript断点来跟踪更改）。) But either Firebug does not have the capability to see bound events, or I'm too dumb to find it.(但是Firebug无法查看绑定事件，或者我太笨了，找不到它。) :-)(:-))

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一样。)   ask by Jaanus translate from so

Answer 1

See How to find event listeners on a DOM node .(请参阅如何在DOM节点上查找事件侦听器 。)

In a nutshell, assuming at some point an event handler is attached to your element (eg): $('#foo').click(function() { console.log('clicked!') });(简而言之，假定某个事件处理程序已附加到您的元素上（例如）： $('#foo').click(function() { console.log('clicked!') });)

You inspect it like so:(您可以像这样检查它：)

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

See jQuery.fn.data (where jQuery stores your handler internally).(请参阅jQuery.fn.data （其中jQuery在内部存储您的处理程序）。)

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