如何利用开发者工具保留pointerover事件状态以进行调试？

以下几种方法可以帮你解决调试时状态被pointerout清除的问题：

• 禁用指针事件
  在Chrome DevTools的Elements面板右上角，点击三个点图标，找到「Disable pointer events」选项并开启。开启后，页面上所有指针事件（包括pointerout）都不会触发，你可以安心操作DOM树，元素的hover状态也会一直保持。调试完成后记得关闭这个选项，避免影响正常交互。

• 强制启用hover状态或手动添加控制类
  在Elements面板的Styles标签中，找到元素的:hover伪类规则，点击规则左侧的复选框就能强制启用hover状态，模拟pointerover触发后的视觉效果。如果你的提示框是通过自定义类（比如tooltip-shown）控制显示的，直接在Elements面板的元素属性里加上这个类，就能让提示框一直显示，不用依赖指针事件。

• 临时注释pointerout的处理逻辑
  找到代码中监听pointerout事件并清除状态的部分，临时注释掉这部分代码，比如：

  // 临时注释，调试用
  // element.addEventListener('pointerout', () => {
  //   hideTooltip();
  // });
  

  这样鼠标移开时就不会清除状态了，调试完再恢复代码即可。

• 用断点暂停状态清除操作
  在pointerout事件的处理函数内部打一个断点，当事件触发时代码会暂停，此时状态还没被清除，你可以查看当前DOM结构、变量值等信息。也可以在DevTools的「Event Listener Breakpoints」面板中，展开「Pointer Events」并勾选pointerout，触发事件时会自动进入断点，方便逐步排查问题。

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