Chrome devtools：仅在父级鼠标悬停时才检查项目上的元素

Question

我在devtools中找不到DOM中的元素。

仅当我将鼠标悬停在其父级上时才会显示该元素。在代码中，鼠标悬停，使用javascript，很多类被添加到不同的元素，然后才会出现我的子元素。 （没有悬停事件，只有鼠标悬停在js上）

因为有很多类，我不能手动添加它们。如何在此上下文中检查和调试元素？ Chrome是否提供任何帮助？

谢谢！

Answer 1

如果您的活动是这样附加的： document.getElementById('idOfYourElement').addEventListener('mouseover', function(){ console.log('hover'); })，

您可以通过编程方式触发事件： document.getElementById('idOfYourElement').dispatchEvent(new Event('mouseover'))。

如果您的鼠标位于视口之外，它应保持此状态，您可以使用dev-tools进行调试。

Answer 2

是的，Chrome devtools有处理hover/mouse over元素的工具，请参阅图片：