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

【问题标题】：Analyze a mouse click in perfomance tab of DevTools在 DevTools 的性能选项卡中分析鼠标单击
【发布时间】：2019-11-14 21:53:32
【问题描述】：

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

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

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

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

如何捕捉点击的瞬间？

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：