我需要调试一个web应用程序,使用jQuery做一些相当复杂和混乱的DOM操作。在某一时刻,一些绑定到特定元素的事件没有触发,只是停止工作。
如果我有编辑应用程序源代码的能力,我将深入并添加一堆Firebug console.log()语句和注释/取消注释代码段,以试图查明问题。但是让我们假设我不能编辑应用程序代码,并且需要使用Firebug或类似的工具完全在Firefox中工作。
Firebug非常擅长让我导航和操作DOM。不过,到目前为止,我还没有弄清楚如何使用Firebug进行事件调试。具体来说,我只想看到在给定时间绑定到特定元素的事件处理程序列表(使用Firebug JavaScript断点跟踪更改)。但是,要么Firebug没有看到绑定事件的能力,要么我太笨了,找不到它。: -)
有什么建议或想法吗?理想情况下,我只希望查看和编辑绑定到元素的事件,类似于我现在编辑DOM的方式。
参见如何在DOM节点上查找事件侦听器。
简而言之,假设在某一点上一个事件处理程序附加到你的元素(例如):$('#foo').click(function() {console.log('clicked!')});
你这样检查它:
jQuery 1.3.x
var clickEvents = $('#foo').data("events").click;
jQuery。每个(点击事件,函数(键,值){
Console.log (value) //打印"function() {Console.log ('clicked!')}"
})
jQuery 1.4.x
var clickEvents = $('#foo').data("events").click;
jQuery。每个(点击事件,函数(键,handlerObj) {
console.log(handlerObj.handler) //打印"function() {console.log('clicked!')}"
})
参见jQuery.fn.data (jQuery内部存储处理程序的地方)。
jQuery 1.8.x
var clickEvents = $ ._data($(“# foo”)[0],“事件”).click;
jQuery。每个(点击事件,函数(键,handlerObj) {
console.log(handlerObj.handler) //打印"function() {console.log('clicked!')}"
})
元素旁边的Ev图标
在Firefox开发人员工具的检查面板中列出了绑定到元素的所有事件。
首先用Ctrl + Shift + C选择一个元素,例如Stack Overflow的upvote箭头。
点击元素右侧的ev图标,会打开一个对话框:
单击所需事件的暂停符号||符号,这将在处理程序所在行打开调试器。
现在,您可以像往常一样在调试器中设置断点,只需单击该行的左侧空白即可。
这是在https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners上提到的
不幸的是,我找不到一种方法来很好地发挥美化,它似乎只是在缩小线:如何美化Javascript和CSS在Firefox / Firebug?
在Firefox 42上测试。