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

问题描述

我需要调试一个 Web 应用程序，它使用 jQuery 来做一些相当复杂和凌乱的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 console.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屋！