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 + "" --> "函数(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 函数中的断点也可以工作。

Answer 2

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

1) 问题：

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

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

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

3) “启用突变中断”：

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

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

4) 检查堆栈标签：

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

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

---

• HTML Panel - FirebugWiki: Break On Mutate

---

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