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

Posted 2023-02-22

【中文标题】记录或记录所有浏览器 DOM/JQuery 事件

【英文标题】：Record or log all browser DOM/JQuery Event(s)

【发布时间】：2011-12-21 12:04:29

【问题描述】：

在被某些浏览器事件（单击、焦点、？）触发后，我需要以编程方式（在 javascript 中）执行一些在第三方组件中发生的事情。我不知道事件类型、事件绑定的元素或正确的参数。

-尝试在子树修改上设置 Chrome 断点，但没有任何效果。 - 尝试检查 jQuery 事件，但 data('events') 没有发现任何有用的信息 - 它们一定是使用 DOM 事件。

难道不应该有某种方式在浏览器中记录/捕获/记录所有事件，然后检查它们（甚至回放它们）吗？这似乎是找出我想知道的唯一方法。

【问题讨论】：

您知道您可以在 chrome 中看到事件调用的函数，只需在检查器中选择元素并检查样式下方右侧显示 Event Listenes 的选项卡

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

能在第三方代码执行之前先执行代码吗？

是的，我可以。 75% 的第三方组件在 iframe 中加载，因此我可以在其他 dom 元素更早完全加载时触发一些代码。

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

【参考方案1】：

2021 年更新

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

从省略号 ( ...) 菜单。 转到“网络”标签。 点击左侧的小录制按钮。 刷新页面和/或执行操作以触发所需事件。

刷新将显示加载事件的顺序，您还可以过滤 AJAX、JS 和其他类型的事件。或者，您可以在 Sources 选项卡中为鼠标悬停时发生的某些用户事件设置断点等。

【讨论】：

我认为 OP 不是在谈论加载/AJAX 事件。相反，他谈论的是用户事件。

有趣的是……听起来他对我来说确实如此。不过，对一个完美的答案投反对票是多么愚蠢的理由。

更新了吗？我不明白为什么。在提交答案之前，我确实执行了我列出的确切步骤。 Chrome 可以做到这一点的事实意味着它显然可以做到。诚然，我从来没有浪费时间研究如何，因为 Chrome 一直都足以满足我的目的。干杯 ;)

完美的答案。我经常用这个。它不仅会显示 AJAX（正如 Randomblue 可能建议的那样），还会显示所有点击和 DOM 事件。很有用！

【参考方案2】：

在 Chrome 中，您可以在开发工具的控制台中使用 monitorEvents() 来记录您希望在测试期间触发的所有事件。

【讨论】：

添加参考链接：developers.google.com/web/updates/2015/05/…