在 DevTools 的性能选项卡中分析鼠标单击

Posted 2023-03-06

【中文标题】在 DevTools 的性能选项卡中分析鼠标单击

【英文标题】：Analyze a mouse click in perfomance tab of DevTools

【发布时间】：2019-11-14 21:53:32

【问题描述】：

我正在尝试分析单击网页中的按钮时会发生什么。单击按钮后，将显示一个微调器元素。

问题是，点击和微调器之间有短暂的延迟。延迟各不相同。我希望测量点击和微调器出现之间经过的时间。

所以，我正在使用 DevTools 的 Performance 选项卡记录页面。 我可以在Interactions 部分看到Mouse Move，但我找不到鼠标点击。

关于使用 DevTools here 和 here 有一些很好的问题，但不是我需要的。

如何捕捉点击的瞬间？

【问题讨论】：

点击基本上是 MouseDown 后跟 MouseUp。您的日志中有这些鼠标事件吗？

不，它们不在日志中。这就是问题所在。

【参考方案1】：

这是我单击 I'm feeling lucky 按钮时从 Chrome 性能中得到的结果。您可以看到“鼠标按下”事件。

但您应该知道，统计数据不如记录您希望跟踪的事件之间的时间可靠。

【讨论】：

谢谢，但是，我无法看到鼠标按下事件，现在我正在测试的页面不可用。

【参考方案2】：

我知道你说的是 Chrome，但 Firefox 有这个功能：