如何使用Firebug（或类似工具）debuggingJavaScript / jQuery事件绑定
我需要debugging一个使用jQuery的web应用程序来执行一些相当复杂和混乱的DOM操作。 有一段时间，某些与特定因素有关的事件不会被解雇，而只是停止工作。
如果我有能力编辑应用程序源代码，那么我将深入研究并添加一堆Firebug console.log()语句和注释/取消注释代码片段，以查明问题所在。 但是让我们假设我不能编辑应用程序代码，并需要使用Firebug或类似工具完全在Firefox中工作。
Firebug非常擅长让我导航和操作DOM。 到目前为止，我还没有弄清楚如何使用Firebug进行事件debugging。 具体来说，我只想看在特定时间绑定到特定元素的事件处理程序列表（使用Firebug JavaScript断点来跟踪更改）。 但是，无论是萤火虫没有能力看到绑定的事件，或者我太愚蠢，找不到。 🙂
任何build议或想法？ 理想情况下，我只想查看和编辑绑定到元素的事件，与我今天如何编辑DOM类似。
请参阅如何在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!') }" })
有一个名为Visual Event的书签，可以显示所有附加到元素的事件。 它为不同types的事件（鼠标，键盘等）设置了颜色标记。 当您将鼠标hover在它们上方时，它会显示事件处理程序的主体，连接方式以及文件/行号（在WebKit和Opera上）。 您也可以手动触发事件。
它不能find每一个事件，因为没有标准的方法来查找什么事件处理程序附加到一个元素，但它与stream行的库，如jQuery，Prototype，MooTools，YUI等。
Eventbug的扩展已经在昨天发布，请看： http : //www.softwareishard.com/blog/firebug/eventbug-alpha-released/
你可以使用FireQuery 。 它显示了在Firebug的HTML选项卡中附加到DOM元素的所有事件。 它还显示通过$.data附加到元素的任何数据。
这是一个插件，可以列出给定元素/事件的所有事件处理程序：
$.fn.listHandlers = function(events, outputFunction) { return this.each(function(i){ var elem = this, dEvents = $(this).data('events'); if (!dEvents) {return;} $.each(dEvents, function(name, handler){ if((new RegExp('^(' + (events === '*' ? '.+' : events.replace(',','|').replace(/^on/i,'')) + ')$' ,'i')).test(name)) { $.each(handler, function(i,handler){ outputFunction(elem, '\n' + i + ': [' + name + '] : ' + handler ); }); } }); }); };
像这样使用它：
// List all onclick handlers of all anchor elements: $('a').listHandlers('onclick', console.info); // List all handlers for all events of all elements: $('*').listHandlers('*', console.info); // Write a custom output function: $('#whatever').listHandlers('click',function(element,data){ $('body').prepend('<br />' + element.nodeName + ': <br /><pre>' + data + '<\/pre>'); });
Src :(我的博客） – > http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/
WebKit开发者控制台（可在Chrome，Safari等中find）让您查看元素的附加事件。
在这个堆栈溢出问题的更多细节
在jquery 1.7+中使用$._data(htmlElement, "events") ;
例如：
$._data(document, "events")或$._data($('.class_name').get(0), "events")
正如一位同事所build议的，console.log> alert：
var clickEvents = $('#foo').data("events").click; jQuery.each(clickEvents, function(key, value) { console.log(value); })
jQuery存储以下事件：
$("a#somefoo").data("events")
做一个console.log($("a#somefoo").data("events"))应该列出附加到该元素的事件。
在最新的Chrome（v29）中使用DevTools，我发现这两个提示对debugging事件非常有帮助：
-
列出最后select的DOM元素的 jQuery事件
- 检查页面上的元素
- 在控制台中键入以下内容：
$ ._ data（ $ 0 ，“events”）//假设jQuery 1.7+
- 它将列出与之相关的所有jQuery事件对象，展开感兴趣的事件，右键单击“处理程序”属性的function并select“显示函数定义”。 它将打开包含指定function的文件。
-
使用monitorEvents （）命令
看起来像FireBug船员正在一个EventBug扩展。 它将添加另一个面板到FireBug – 事件。
“事件面板将列出按事件types分组的页面上的所有事件处理程序。对于每个事件types，您可以打开查看监听器绑定的元素以及函数源摘要。 EventBug上升
虽然现在还不能说出来，
根据这个线程 ，Firebug没有办法在DOM元素上查看附加到侦听器的事件。
看起来你可以做的最好的是tj111所build议的，或者你可以在HTML查看器中右键单击该元素，然后单击“logging事件”，以便可以查看针对特定DOM元素触发哪些事件。 我想可以这样做，看看哪些事件可以引发特定的function。
我还在Chrome商店中发现了jQuerydebugging器 。 你可以点击一个dom项目，它将显示绑定到它的所有事件以及callback函数。 我正在debugging一个应用程序，其中的事件没有被正确删除，这帮助我在几分钟内追踪它。 显然，这是铬，但不是火狐。
Firefox开发工具“ 检查器”面板中除了元素之外的ev图标列出了绑定到元素的所有事件。
首先用Ctrl + Shift + Cselect一个元素，例如Stack Overflow的upvote箭头。
点击元素右侧的ev图标，打开一个对话框。
点击暂停标志|| 符号为你想要的事件，并打开处理程序的行debugging器。
您现在可以像往常一样在debugging器中放置一个断点，方法是单击该行的左边空白处。
这在以下地址提到： https ： //developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners
不幸的是，我无法find一个方法，这很好地与美化，它似乎打开在缩小线： 在Firebug Beautify Javascript和CSS？
在Firefox 42上testing
在2.0版本中，Firebug引入了一个Events面板 ，该面板列出了HTML面板中当前所选元素的所有事件。
它还可以显示包装到jQuery事件绑定中的事件侦听器 ，以防在选中显示包装侦听器的情况下，您可以通过“ 事件”面板的选项菜单访问该选项 。
使用该面板，debugging事件处理程序的工作stream程如下所示：
- select要debugging的事件侦听器的元素
- 在“ 事件”面板中，右键单击相关事件下的function，然后select“ 设置断点”
- 触发事件
=>脚本执行将停止在事件处理函数的第一行，您可以对其进行debugging。
Firebug 2现在包含了DOM事件debugging/检测。
