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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8000914/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 04:20:11  来源:igfitidea点击:

Record or log all browser DOM/JQuery Event(s)

javascriptjqueryfirefoxdomgoogle-chrome

提问by skeej

I had a problem of needing to do some stuff programmatically (in javascript) that was happening in a third party component after being triggered by some browser events (click, focus, ?). I didn't know the event type, the element that the event was bound to, or the proper parameters.

我遇到了一个问题,需要以编程方式(在 javascript 中)执行某些由某些浏览器事件(单击、焦点、?)触发后在第三方组件中发生的事情。我不知道事件类型、事件绑定到的元素或正确的参数。

-Tried setting Chrome breakpoints on subtree modifications, but nothing worked.
-Tried checking for jQuery events, but data('events') didn't reveal anything useful- they must be using DOM events.

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

Shouldn't there be some way of recording/capturing/logging all the events in a browser and then checking them (or even playing them back)? That seems like the only way to find out what I want to find out.

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

回答by Chiramisu

Yes Chrome can :)

是的,Chrome 可以 :)

  1. Open your the "Developer Tools" (Ctrl+Shift+I) / from the Wrench menu / or right-click on page and click "Inspect Element"
  2. Go to the "Timeline" tab.
  3. Click the little Record button at the bottom.
  4. Refresh the page.
  1. 打开您的“开发人员工具”(Ctrl+Shift+I)/从扳手菜单/或右键单击页面并单击“检查元素”
  2. 转到“时间轴”选项卡。
  3. 单击底部的小记录按钮。
  4. 刷新页面。

It will show you all load events (in yellow) as well as AJAX events that happen when you mouse-over stuff, etc.

它将向您显示所有加载事件(黄色)以及鼠标悬停时发生的 AJAX 事件等。

Cheers ;)

干杯;)

回答by Quintus Chen

In Chrome you can use monitorEvents()in the console of dev tools to record all the events that you would like to monitor triggered during your test.

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