记录或记录所有浏览器DOM/JQuery事件

Question

我遇到了一个问题，需要在第三方组件中（通过点击、焦点等浏览器事件触发）以编程方式完成一些操作（在JavaScript中）。 我不知道事件类型、事件绑定元素或适当的参数。

-尝试在Chrome上设置子树修改断点，但没有起作用。
-尝试检查jQuery事件，但data('events')没有显示任何有用的信息-它们必须使用DOM事件。

难道不存在一种记录/捕获/记录浏览器中所有事件然后进行检查（甚至回放）的方法吗？这似乎是找出我想要找出的唯一方法。

- skeej

---

你知道在Chrome中可以看到由事件调用的函数，只需在检查器中选择元素并检查右侧下方标签上的“事件监听器”选项卡即可。 - Ibu

是的，我检查过了，没有为基于用户操作的事件（例如单击、聚焦）设置处理程序，只有加载事件。似乎是一个很好的功能，但在这种情况下帮助不大。 - skeej

你能在第三方代码执行之前执行代码吗？ - pimvdb

是的，我可以。第三方组件的75%将在iframe中加载，因此当其他DOM元素提前完全加载时，我可以触发一些代码。 - skeej

@skeej：你能编辑iframe的页面吗？如果可以，你可以覆盖像Element.prototype.addEventListener这样的函数来拦截添加的监听器。 - pimvdb

Answer 1

2021年更新

您可以在任何基于Chromium的浏览器（例如Brave，Dissenter，Edge等）中执行以下操作:

1. 从省略号（...）菜单中打开“开发者工具”（F12或Ctrl+Shift+I）。
2. 转到“网络”选项卡。
3. 单击左侧的小录制按钮。
4. 刷新页面和/或执行操作以触发所需事件。

刷新将显示加载事件的序列，并且您还可以过滤AJAX、JS和其他类型的事件。或者，您可以在“源”选项卡中为某些用户事件设置断点，这些事件会在您将鼠标悬停在某些内容上时发生。

- Chiramisu

---

我认为这位OP并不是在谈论加载/ AJAX 事件，而是在谈论用户事件。 - Randomblue

有趣的是...对我来说，他的确听起来像。不过这也太荒谬了，没必要因为这个原因就给一个完美的回答点踩。 - Chiramisu

更新？我不明白为什么要更新。我在提交答案之前确实按照我列出的步骤进行了操作。Chrome可以做到这一点，这意味着它显然是可行的。诚然，我从来没有浪费时间去研究如何做到这一点，因为Chrome对我的目的来说已经足够好了。干杯 ;) - Chiramisu

非常好的答案。我经常使用这个方法。它不仅可以显示 AJAX（就像 Randomblue 建议的那样），而且还可以显示所有的点击和 DOM 事件。非常有用！ - Willem Mulder

Answer 2

在Chrome浏览器中，您可以使用开发工具控制台中的monitorEvents()函数来记录在测试期间需要监视的所有事件。

- Quintus Chen

---

添加参考链接：https://developers.google.com/web/updates/2015/05/quickly-monitor-events-from-the-console-panel - Stephen McDowell