如何临时停止Chrome DevTools记录鼠标事件，定位特定onMouseMove事件？

核心快捷键与精准定位方案 #

1. 临时启停事件记录的快捷键：你要找的是 Ctrl+E（Windows/Linux）或 Cmd+E（Mac）——这个快捷键可在Chrome DevTools的Performance或Sources面板中，临时停止/恢复事件记录，避免后续大量mouseMove事件淹没目标记录。

2. 精准定位目标元素中心事件的方法：仅靠快捷键过滤效率有限，结合条件断点能直接锁定你需要的事件：

   • 打开DevTools（F12/Ctrl+Shift+I），切换到Sources面板
   • 展开侧边栏的Event Listener Breakpoints → Mouse，只勾选mousemove（过滤无关事件）
   • 右键mousemove选项，选择Edit condition，输入自定义匹配条件：

     // 替换为你的目标元素选择器，示例为".target-element"
     const target = document.querySelector('.target-element');
     if (!target) return false;
     const rect = target.getBoundingClientRect();
     const centerX = rect.left + rect.width / 2;
     const centerY = rect.top + rect.height / 2;
     // 匹配中心±5px范围内的事件，可按需调整阈值
     return Math.abs(event.clientX - centerX) < 5 && Math.abs(event.clientY - centerY) < 5;
     

   • 设置完成后，当鼠标移动到目标元素中心区域时，DevTools会自动暂停并定位到触发该事件的代码，彻底避开无关事件干扰。

3. 快速定位目标元素的小技巧：若还未锁定目标元素，直接在页面上右键点击目标对象→Inspect，DevTools会自动在Elements面板选中该元素，你可复制它的选择器替换到上述代码中。

内容的提问来源于stack exchange，提问作者Andrew