如何检查鼠标移出后变得不可见的dom元素？

Question

我正在尝试检查视频播放器（如youtube播放器）的dom结构。 Dom元素仅在鼠标移动时可见，并且有嵌套元素，这些元素需要触发其他事件，例如单击字幕按钮。我找不到任何方法来移动鼠标时获取html的子节点。在我检查内容之前，内容消失得如此之快。

我尝试了每个dom节点上的诸如活动悬停焦点之类的元素状态不起作用。据我了解，当鼠标停止时它会检测到鼠标移动事件，它会切换元素，但是我尝试在几个html元素上调度鼠标移动事件在控制台中，该方法不会切换dom节点。

Answer 1

我通常要做的是在父元素上添加一个断点，然后使用调试器检查该元素或其子元素，以暂停对dom树的修改。

在Chrome开发者工具中

1. 转到“元素”标签
2. 右键单击要监视的元素
3. 选择“中断...”，然后选择“子树修改”或“属性修改”或“节点删除”

或者您可以手动将鼠标悬停在元素上并使用以下方法添加断点 使用以下快捷方式“暂停/恢复脚本执行”

1. F8或Ctrl + \（Windows）
2. F8或Cmd + \（Mac）

Answer 2

我发现最简单的方法是添加一个脚本来停止js执行。

/* This will stop execution when we press F12 */
window.addEventListener('keydown', e => { if (e.keyCode === 123) debugger })