Firebug:找到javascript事件的起源

Question

是否有可能知道在页面的特定DOM元素上触发特定事件的javascript代码行是什么？

例如,如果你去那里:http://www.gamempire.it/,是什么代码行使页面的标识可拖动(class ="brand master").

谢谢

Answer 1

这就是我在Firebug中调试它的方法,纯粹是通过控制台:

• 下载Firebug 1.12b1或更高版本,它具有getEventListeners命令行API功能(Chrome也有此功能).

• 在HTML面板中选择元素,使其可用$0.

• getEventListeners($0) - >对象{click = [1],mousedown = [1],remove = [1]}

  (啊,所以它有一个mousedown听众.很好.)

• getEventListeners($0).mousedown[0].listener + "" - >"function(e){return typeof jQuery!== core_strundefined &&(!e || jQuery.event.triggered!== e.type)？jQuery.event.dispatch.apply(eventHandle.elem,arguments):undefined ;}"

  (内部jQuery包装器.让我们来解决这个问题.)

• $._data($0, 'events') - >对象{remove = [1],mousedown = [1],click = [1]}

• f = $._data($0, 'events').mousedown[0].handler

• f + "" - >"function(e){return t._mouseDown(e)}"

  (嗯.t看起来不是全局的,但我们可以使用Firebug(非常非标准的)闭包访问器语法来解决这个问题.)

• f.%t._mouseDown + "" - >"function(){var i,s = this._super,a = this._superApply; return this._super = e,this._superApply = t,i = n.apply(this,arguments),this._super = S,= this._superApply A,I}"

• f.%._mouseDown.%n + "" - > ......一大堆代码,最终看起来很相关.

在某些时候,应该可以停止进程并开始设置断点,拖动徽标,然后单步执行相关代码,但这个仅限控制台的过程对我来说非常直接,在我习惯了之后它.

在Chrome中,几乎相同的方法应该适用,除了.%必须用控制台中的扩展对象替换语法,然后单击<function scope>.遗憾的是,它不可能在控制台中使用函数,但你仍然可以通过想要的函数在其中设置断点.(旁注:Firebug相当于在DOM面板中打开对象,检查后者的"显示闭包"选项,并展开"(闭包)".然后您可以通过右键单击 - >"使用"返回控制台在命令行",但它仍然比替代,IMO更笨拙.)

Chrome的另一种方法是转到"Sources"面板,为"mousedown"设置"Event Listener Breakpoint",点击徽标,然后踩到/直到你点击想要的功能(最好启用漂亮的打印) - 使用底部的{}图标).这可能更容易.:)

或者,如果您实际上询问哪一段代码添加了事件监听器:最简单的方法是检查我们刚刚找到的函数周围的代码.库的add-event-listener函数中的断点也可以工作.