如何使用Firebug（或类似工具）调试JavaScript / jQuery事件绑定 [英] How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)

问题描述

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

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

Firebug非常好的让我导航并操纵DOM。到目前为止，尽管如此，我还没有想出如何用Firebug进行事件调试。具体来说，我只想在给定的时间看到绑定到特定元素的事件处理程序的列表（使用Firebug JavaScript断点跟踪更改）。但是Firebug没有能力看到绑定的事件，或者我太笨了，找不到。 ： - ）

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

解决方案

如何在DOM节点上查找事件监听器。

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

你像这样检查： / p>

• jQuery 1.3.x

    var clickEvents = $（'＃foo'）。data（events）。 
   jQuery.each（clickEvents，function（key，value）{
   console.log（value）//打印function（）{console.log（'clicked！'）}
   }）
    




• jQuery 1.4.x

    var clickEvents = $（'＃foo'）。data（events）。 
   jQuery.each（clickEvents，function（key，handlerObj）{
   console.log（handlerObj.handler）//打印function（）{console.log（'clicked！'）}
   $）
    

请参阅 jQuery.fn.data （其中jQuery存储您的处理程序内部）。

• jQuery 1.8.x

    var clickEvents = $ ._ data（$（'＃foo'）[0]，events）。 
   jQuery.each（clickEvents，function（key，handlerObj）{
   console.log（handlerObj.handler）//打印function（）{console.log（'clicked！'）}
  }）
    

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.

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 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. :-)

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.

解决方案

See How to find event listeners on a DOM node.

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

You inspect it like so:

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

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

• 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屋！