56

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

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

4

3 回答 3

55

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

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

事件错误截图

EventBug 不会实时执行，但您必须刷新。

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

试试这个：

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

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

在此处输入图像描述

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

正如本维的回答所提到的，这在 webkit 的开发人员工具中也是可能的。

于 2012-06-19T08:33:53.390 回答
16

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

Firefox 事件检查器

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

于 2015-03-19T16:14:28.807 回答
4

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

但实际上，WebKit 调试器和 Chromium 的调试器（这是 webkit 的加分项）允许调试和观察附加的侦听器。有时更容易在另一个浏览器中调试一个浏览器的错误，从而更好地暴露应用程序/运行时状态，即使该浏览器没有显示错误。

在此处输入图像描述

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

于 2012-07-04T05:44:16.007 回答