微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在 Chrome DevTools Profile 选项卡中按事件类型过滤,例如看鼠标点击?

如何解决如何在 Chrome DevTools Profile 选项卡中按事件类型过滤,例如看鼠标点击?

我试图调试当来自网站的另一个页面时呈现新页面需要多长时间。

所以我所做的是:

  • 点击开始录制
  • 将鼠标移到一个链接上,不转到其他页面
  • 点击链接
  • 将鼠标移回 DevTools 以停止录制

然后我想看看从点击到在个人资料上加载新页面之间需要多长时间。

问题是我必须将鼠标移动到感兴趣的链接,因此我收到了其他几个事件,例如在单击之前使用 mousemove 和 mouSEOver,很难发现单击事件本身的位置。这尤其成问题,因为与 mousemove 相比,click 事件可能相当短。

有没有办法只过滤鼠标点击事件?

在 Chromium 91、Ubuntu 20.10 上测试。

解决方法

“个人资料”选项卡上的 Ctrl + F

在网上找不到它后,我只是尝试了 Ctrl + F 并且奏效了。它会在底部打开一个搜索栏,然后我输入感兴趣的事件的名称,例如mousedown 并用红色边框突出显示单个匹配事件:

enter image description here

对于点击的特定情况,请注意有时还会发生 mouseclick 事件,但如果按钮在不同元素上释放,则可能不会发生。所以你通常想要的只是看看mousedownDifference between mousedown and click in jquery

在 Chromium 91、Ubuntu 20.10 上测试。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。