检查Chrome开发者工具中的Javascript悬停

我有一些Javascript，它在hover上显示一个元素。我想设置这个元素的样式，因此需要使用chromedev工具在浏览器中触发悬停状态

使用CSS很容易做到这一点，您可以在开发工具中设置元素的状态。使用Javascript实现这一点的最佳方法是什么

代码示例：

$('#menu').hover(
    function() {
        console.log('test');
        $('#dropdown').show();
    },

    function() {
        $('#dropdown').hide();
    }
);

---

按F12打开开发工具，然后单击右上角的切换元素状态。在这里，您可以激活悬停状态

更新： 您可以在单击事件上触发悬停/鼠标悬停/鼠标悬停事件：

$("#menu").click(function() {    
    $(this).trigger("mouseover");    
    $(this).trigger("hover");    
    $(this).trigger("mouseenter"); 
});

---

以下面的菜单片段为例，其中显示了鼠标悬停时的下拉菜单：

$（“#菜单”）。悬停(
函数（）{
$（“#下拉列表”）.show（）；
}，函数（）{
$（“#下拉列表”）.hide（）；
}
);
#菜单{
宽度：100px；
背景色：#03f；
颜色：#fff；
填充物：2px 5px；
}
#下拉列表{
宽度：100px；
背景色：#03f；
颜色：#fff；
填充物：2px 5px；
显示：无；
}

菜单

菜单项1
菜单项2
菜单项3

另一种选择是，将鼠标悬停在元素上，然后按F8键（这仅适用于Chrome）暂停脚本执行。悬停状态将保持可见。
根据其他答案，您可以通过DevTools快捷方式暂停JS执行；但是，您需要将重点放在DevTools窗口上，这样才能工作。如果需要暂停而不关注DevTools窗口，可以将
debugger
语句绑定到按键事件，如下所示：

document.addEventListener('keydown', e => { if (e.keyCode == 123) debugger; })

在控制台中运行此代码段将添加一个侦听器，当您按下F12时，该侦听器将暂停代码执行。
虽然@missemm的回答最简单，但Chrome中另一个可用选项是（在开发工具面板已打开的情况下）触发菜单，然后右键单击要检查的元素，并从“开发工具”菜单中选择“查看页面源代码”选项。这将打开另一个窗口并从您正在检查的窗口中删除焦点，因此如果菜单正在侦听pointerout事件，则不会触发该事件。只需关闭“页面源”选项卡，只要将鼠标远离原始窗口视口，菜单将保持打开状态，但您仍然可以使用“开发工具”面板

如果您通常需要同时按“fn”和“f8”（单手拉伸），这有时会更方便
 什么对我有用：

在chrome开发工具元素选项卡：

右键单击悬停时更改的元素的父级
选择断开->子树修改
在浏览器暂停相关子树修改时，检查相关子元素
我知道这听起来很奇怪，但你可以用键盘上的“Tab”按钮来完成

按F12->检查元素->将鼠标悬停在元素上->离开鼠标（！重要）->按“tab”直到到达元素的样式部分->按“Enter”开始编辑样式标记->使用“tab”在样式部分中移动。
在inspector->Force element state->Hover中的元素节点上单击鼠标右键这是一个没有好答案的好问题。它应该有更多的投票权。这只适用于CSS我正在寻找一个解决方案，与Javascript请工作。谢谢，请编辑至原文。POSI进行了修改，因此该函数由另一个元素触发，因为它不起作用-因为鼠标离开元素时悬停将其隐藏。我还想提一下，这段代码不能添加到Chrome开发工具控制台中。理想情况下，这是我可以测试悬停。非常方便，只需按一个键！尽管OSX上的Chrome声称F8可以实现这一点，但它也显示了command-\（反斜杠）作为同一事物的另一个组合键。只有命令-\对我有效。请注意，只有在按下
F8
的同时，在DevTools的“源”选项卡中，它才有效。这正是我要找的