Javascript 使用 Firefox，如何监控所有触发的事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11097234/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Firefox, how can I monitor all events that are fired?
提问by gsharp
I'm trying to debug a web page that makes heavy use of events, and so I need to monitor all events that are fired.
我正在尝试调试一个大量使用事件的网页，因此我需要监视所有触发的事件。
Most of the events are bound using jQuery. Hence, it would be particularly useful if there was a way to specifically monitor only those events.
大多数事件都是使用 jQuery 绑定的。因此，如果有一种方法可以专门监控这些事件，那将特别有用。
回答by Moin Zaman
Of course you can do just fine with Firebug, the console and the scripts tab where you can add breakpoints and watches, but you want to do it smarter / easier obviously.
当然，您可以使用Firebug、控制台和脚本选项卡，您可以在其中添加断点和监视，但显然您希望做得更智能/更容易。
There is a neat Firebug plugin called EventBugthat just logs all the events and groups them by event type so you can expand and see what triggered them.
有一个名为EventBug的简洁 Firebug 插件，它只记录所有事件并按事件类型对它们进行分组，以便您可以展开并查看是什么触发了它们。
EventBug doesn't do it realtime, you have to refresh though.
EventBug 不会实时执行，但您必须刷新。
One other way is to use the 'Log Events' feature against any DOM element in Firebug. This does do it realtime and you can see what order events are fired / triggered as well.
另一种方法是对 Firebug 中的任何 DOM 元素使用“日志事件”功能。这确实是实时的，您还可以看到触发/触发了哪些订单事件。
Try this:
尝试这个：
- Toggle open Firebug
- Right click the element in HTML tab, if you want to see all events then right click
<body> - Choose
Log Eventsfrom the context menu - Make sure the Console tab is enabled
- Click to enable the 'Persist' mode in the Console tab (otherwise Console tab will clear after the page is reloaded)
- You may have to select
Closed(manually) - Voila! watch events stream in the console tab
- 切换打开 Firebug
- 右键单击 HTML 选项卡中的元素，如果要查看所有事件，请右键单击
<body> - 选择
Log Events从上下文菜单 - 确保控制台选项卡已启用
- 单击以启用控制台选项卡中的“持久”模式（否则控制台选项卡将在页面重新加载后清除）
- 您可能需要选择
Closed（手动） - 瞧！在控制台选项卡中观看事件流
This is what you see with Log Events:
这是您在日志事件中看到的内容：
Also worth trying the FireQueryadd-on for Firebug to see what elements in the DOM have jQuery events attached to them and what they are.
还值得尝试Firebug的FireQuery附加组件，以查看 DOM 中的哪些元素附加了 jQuery 事件以及它们是什么。
And as benvie's answer mentions, this is possible in webkit's developer tools as well.
正如本维的回答所提到的，这在 webkit 的开发人员工具中也是可能的。
回答by AxeEffect
This has been introduced some versions ago but as of Firefox 35 events associated with an element can be seen on the Inspector: next to the element which you want to see the events (in case there is any) there will be an icon with the 'EV' letters. Click it and you will see a small popup window with the events for that element.
这已在一些版本之前引入，但从 Firefox 35 开始，可以在 Inspector 上看到与元素关联的事件：在您想要查看事件的元素旁边（如果有），将有一个带有 ' 的图标EV' 字母。单击它，您将看到一个带有该元素事件的小弹出窗口。
More info: http://flailingmonkey.com/view-dom-events-in-firefox-developer-tools/
更多信息：http: //flailingmonkey.com/view-dom-events-in-firefox-developer-tools/
回答by AxeEffect
This doesnt exist in Firebug I believe, and the underlying problem is lack of support or lack of exposure at the api level. Alternatively, there's only a few ways to subscribe to DOM events: Element.prototype.addEventListener (and window.addEventListener and document.addEventListener and XMLHttpRequest.addEventListener and some others) aside from 'onevent' properties which are observable and interceptable.
我相信这在 Firebug 中不存在，潜在的问题是在 api 级别缺乏支持或缺乏曝光。或者，除了可观察和可拦截的“oneevent”属性之外，只有几种订阅 DOM 事件的方法：Element.prototype.addEventListener（以及 window.addEventListener 和 document.addEventListener 和 XMLHttpRequest.addEventListener 以及其他一些）。
But realistically, the WebKit debugger and Chromium's debugger (which is webkit's with extra points) allow one to debug and observe attached listeners. Sometimes it's easier to debug one browsers's bugs in another browser with better exposure of application/runtime state, even when that browser doesn't exhibit the bug.
但实际上，WebKit 调试器和 Chromium 的调试器（这是 webkit 的加分项）允许调试和观察附加的侦听器。有时，通过更好地暴露应用程序/运行时状态，在另一个浏览器中调试一个浏览器的错误会更容易，即使该浏览器没有显示错误。
https://developers.google.com/chrome-developer-tools/docs/elements
https://developers.google.com/chrome-developer-tools/docs/elements
