是否可以知道在页面的特定 DOM 元素上触发特定事件的 Javascript 代码行是什么?
例如,如果您去那里:http://www.gamempire.it/ ,使页面 Logo 可拖动的代码行是什么 (class="brand master"
)。
最佳答案
这就是我在 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 + ""
--> "函数 (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 + ""
-> ... 一大堆代码,最终看起来很相关。
在某些时候应该可以停止该过程并开始设置断点,拖动 Logo ,然后进入相关代码,但是这个仅限控制台的过程对我来说感觉非常直接,在我已经习惯了。
在 Chrome 中几乎相同的方法应该适用,除了 .%
语法必须替换为控制台中的扩展对象,然后单击 <function scope>
.遗憾的是,那时不可能在控制台中使用这些功能,但您仍然可以通过所需的功能在其中设置断点。 (旁注:Firebug 的等价物是打开 DOM 面板中的对象,选中后者的“显示闭包”选项,然后展开“(闭包)”。您可以然后返回到控制台右键单击 -> “在命令行中使用”,但它仍然比替代方案 IMO 更笨拙。)
Chrome 的另一种方法是转到“Sources”面板,为“mousedown”设置一个“Event Listener Breakpoint”,单击 Logo ,然后进入/越过直到您点击所需的功能(最好使用 pretty-print 已启用 - 使用底部的 {} 图标)。这可能更容易。 :)
或者,如果您真的问哪段代码在那里添加了事件监听器:最简单的方法是检查我们刚刚找到的函数周围的代码。库的 add-event-listener 函数中的断点也可以工作。
关于javascript - Firebug:查找 Javascript 事件来源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17511520/