使用 Firefox，如何监控所有触发的事件？

问题描述 投票：0回答：4

我正在尝试调试一个大量使用事件的网页，因此我需要监视所有触发的事件。

大多数事件都是使用 jQuery 绑定的。因此，如果有一种方法可以专门监视这些事件，那就特别有用。

javascript jquery firefox-addon jquery-events javascript-debugger
4个回答
55
投票

当然，您可以使用 Firebug、控制台和脚本选项卡，您可以在其中添加断点和监视，但显然您希望做得更智能/更简单。

有一个名为 EventBug 的简洁 Firebug 插件，它只记录所有事件并按事件类型对它们进行分组，以便您可以展开并查看触发它们的原因。

EventBug Screenshot

EventBug 不是实时执行的，但你必须刷新。

另一种方法是对 Firebug 中的任何 DOM 元素使用“日志事件”功能。这确实是实时执行的，您也可以看到触发/触发了哪些订单事件。

试试这个：

  • 打开Firebug
  • 右键单击 HTML 选项卡中的元素，如果您想查看所有事件，则右键单击 
    <body>
  • 从上下文菜单中选择
    Log Events
  • 确保控制台选项卡已启用
  • 单击以在控制台选项卡中启用“持久”模式（否则控制台选项卡将在页面重新加载后清除）
  • 您可能需要选择 
    Closed
    （手动）
  • 瞧！在控制台选项卡中观看事件流

这是您在日志事件中看到的内容：

enter image description here

还值得尝试 Firebug 的 FireQuery 插件，以查看 DOM 中的哪些元素附加了 jQuery 事件以及它们是什么。

正如 Benvie 的回答所提到的，这在 webkit 的开发者工具中也是可能的。

20
投票

这已经在一些版本之前引入，但从 Firefox 35 开始，可以在检查器上看到与元素关联的事件：在您想要查看事件的元素旁边（如果有的话）将会有一个带有“EV”字母。单击它，您将看到一个小的弹出窗口，其中包含该元素的事件。

Firefox events inspector

更多信息：http://flailingmonkey.com/view-dom-events-in-firefox-developer-tools/

13
投票

[2023]

Event Listener Breakpoints
已在 FF 69 中引入（并在 FF 71 中进一步改进）。相关文档位于此处。

它允许您自动中断给定类型的任何 event 事件侦听器。此屏幕截图（来自文章）显示了它如何在 

Keyboard
事件中崩溃：

本文进一步解释了 (1) 如何避免每次都中断，而只是 

log
匹配事件，以及 (2) 如何黑箱某些源，以避免必须费力地浏览框架代码的内部（例如 
 jquery
、
react
等）。

他们提供了另一个屏幕截图：

4
投票

我认为 Firebug 中不存在这种情况，其根本问题是缺乏支持或缺乏 api 级别的暴露。或者，只有几种方法可以订阅 DOM 事件：除了可观察和可拦截的“oneevent”属性之外，还有 Element.prototype.addEventListener（以及 window.addEventListener 和 document.addEventListener 和 XMLHttpRequest.addEventListener 等）。

但实际上，WebKit 调试器和 Chromium 的调试器（Webkit 的调试器有额外的优点）允许人们调试和观察附加的侦听器。有时，即使该浏览器没有表现出错误，在另一种浏览器中调试一个浏览器的错误也更容易，并且可以更好地暴露应用程序/运行时状态。

enter image description here

https://developers.google.com/chrome-developer-tools/docs/elements

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.