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

时间：2012-06-19 08:29:55

标签： javascript jquery javascript-events firefox-addon javascript-debugger

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

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

3 个答案:

答案 0 :(得分：51)

当然，你可以使用Firebug，控制台和脚本选项卡，你可以添加断点和监视，但你想要更聪明/更容易地做到这一点。

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

EventBug Screenshot

EventBug没有实时做，你必须刷新。

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

试试这个：

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

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

enter image description here

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

正如benvie的回答所提到的，这也可以在webkit的开发者工具中实现。

答案 1 :(得分：10)

这已经在一些版本之前推出但是从Firefox 35开始，可以在Inspector上看到与元素相关的事件：在你要查看事件的元素旁边（如果有的话）会有一个图标使用＆＃39; EV＆＃39;字母。单击它，您将看到一个小弹出窗口，其中包含该元素的事件。

Firefox events inspector

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

答案 2 :(得分：4)

我认为这在Firebug中并不存在，而潜在的问题是在api级别缺乏支持或缺乏曝光。或者，只有几种方法可以订阅DOM事件：Element.prototype.addEventListener（以及window.addEventListener和document.addEventListener以及XMLHttpRequest.addEventListener和其他一些），除了'onevent'属性，这些属性是可观察和可拦截的。

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

enter image description here

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

相关问题
最新问题