2

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

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

4

2 回答 2

6

这就是我在 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 + ""-> ...一些巨大的代码,最终看起来相关。


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

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


Chrome 的另一种方法是转到“源”面板,为“mousedown”设置一个“事件侦听器断点”,单击徽标,然后单步进入/越过,直到您点击所需的功能(最好启用漂亮的打印 - 使用底部的 {} 图标)。这可能更容易。:)


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

于 2013-07-07T12:20:11.047 回答
2

在 Vista 上通过 FireFox使用Firebug ... 1.12.6

1)问题:

问题

单击复选框时,标签隐藏;使用 Firebug 检查该元素会显示单击时应用的内联样式(可以安全地假设某处有 JavaScript 应用这些样式)。

2) 启用 Firebug 的“脚本”面板:

脚本

...您可能需要刷新浏览器。

3)“启用突变中断”:

在 Firebug HTML 面板中,选择有问题的/特定的 DOM 元素,打开“Enable Break on Mutate”(面板右上角 Firebug 图标下方的橙色暂停按钮)...

在此处输入图像描述

...并采取措施重复问题(在这种情况下,我需要单击复选框)。

4)检查堆栈选项卡:

最后,既然您的代码已在中断事件处停止,请单击“脚本”部分的“堆栈”选项卡...

在此处输入图像描述

...从那里,您应该能够追踪有问题的 JavaScript 的来源。



我不确定这是否是最好的方法,但在这种情况下,它对我有用。

于 2014-02-21T23:49:49.173 回答