google-chrome - "Inspect"悬停元素？

Question

注意:我读过类似的帖子，但没有一个完全是我的问题 - 我可以右键单击它，然后它就消失了。

我发现“检查元素”是 Chrome 中非常宝贵的工具，但是我在将其用作导航栏上某个元素的子菜单时遇到了麻烦，该元素在悬停在其父项上时会在下方弹出。

弹出窗口(或向下)的样式不太像我想要的那样，因此我右键单击>检查元素以查看确切的内容，并更好地了解如何实现我想要的效果。

但是，当我将鼠标从菜单上移开时，它就消失了；因此我无法在检查 Pane 中选择不同的元素，并查看同时突出显示哪个区域。

<小时/>

有没有办法解决这个问题，无需更改菜单，以便它在激活后保持“弹出”状态？

Answer 1

如果hover元素是由JS触发的(如果是由CSS触发的 :hover，请参阅 gmo's answer )，您可以在暂停脚本执行时检查它。与其他答案所建议的相比，这是一种简单得多的卡住 DOM 的方法。您可以暂停脚本执行而不丢失悬停元素，如下所示:

1。通过键盘快捷键

以下是在 Chrome 中执行此操作的方法。我确信 Firefox 有一个等效的过程:

1. 打开开发者工具并转到源代码。

2. 注意暂停脚本执行的快捷方式 - F8(根据您的操作系统，可能还有另一个快捷方式)。

   

3. 与 UI 交互以使元素显示。

4. 点击F8。

5. 现在您可以移动鼠标、检查 DOM 等等。该元素将保留在那里。

2。通过延迟的调试器语句

某些网页附加 keydown/keypress/keyup 事件监听器，这些监听器会干扰上面的快捷方式。在这些情况下，您可以通过在悬停打开时触发 debugger 语句来暂停脚本执行:

1. 打开JS控制台，输入:

   // Pause script execution in 5 seconds
   setTimeout(() => { debugger; }, 5000)
   

2. 触发悬停并等待debugger语句执行。