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

Question

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

问题是，点击和旋转之间有短暂的延迟。并且延迟各不相同。我希望测量点击和旋转器出现之间耗时。

因此，我使用 DevTools 的Performance 选项卡来录制页面。我可以在 Interactions 部分中看到 Mouse Move，但找不到鼠标单击。

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

如何捕捉点击瞬间？

Answer 1

以下是我点击我感觉很幸运按钮时从 Chrome 性能中获得的信息。您可以看到“鼠标按下”事件。

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