在 Chrome 开发者工具中检查 Javascript Hover

Question

我有一些 Javascript，可以在悬停时显示一个元素。我想设置此元素的样式，因此需要使用 Chrome 开发工具触发浏览器中的悬停状态。

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

代码示例：

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

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

Answer 1

另一种选择是用鼠标将鼠标悬停在元素上，然后按 F8（这仅适用于在“源”选项卡上打开开发工具的 Chrome）以暂停脚本执行。悬停状态将保持对您可见。

也可以使用 ctrl+\（或 mac 上的 ⌘+\）暂停脚本

Answer 2

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

更新： 您可以在点击事件时触发悬停/鼠标悬停/鼠标输入事件：

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

Answer 3

以下菜单片段显示悬停时显示下拉菜单：

$('#menu').hover(
  function() {
    $('#dropdown').show();
  }, function() {
    $('#dropdown').hide();
  }
);

#menu {
  width: 100px;
  background-color: #03f;
  color: #fff;
  padding: 2px 5px;
}
#dropdown {
  width: 100px;
  background-color: #03f;
  color: #fff;
  padding: 2px 5px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="menu">menu</div>
<div id="dropdown">
  <ul>
    <li>menu item 1</li>
    <li>menu item 2</li>
    <li>menu item 3</li>
  </ul>
</div>

将此代码段复制到本地文档中，因为 Chrome 开发工具不允许您使用 Javascript 选择此 iframe 中的任何元素。然后，在您的开发工具控制台中，运行：

$('#menu').trigger('mouseover');

这将显示下拉菜单，其中有一个非常丑陋、无样式的列表。现在，不要使用鼠标右键单击该元素并选择“检查元素”（我想这是您习惯做事的方式），而是在控制台中运行：

$('#dropdown');

或者您想要设置样式/操作的任何元素的任何选择器。控制台将显示您的语句的结果，即相关的 jQuery 对象。现在，右键单击控制台中的该对象，然后选择“在元素面板中显示”。现在您可以像以前一样使用“样式”选项卡，并且您的鼠标从未触发过 mouseout 事件，从而结束悬停。

Answer 4

在 chrome 开发工具

Elements

选项卡：

右键单击悬停时发生变化的元素的

parent
1. 选择 中断
->
2. 子树修改 在浏览器暂停相关子树修改时检查相关子元素。

根据其他答案，您可以通过 DevTools 快捷方式暂停 JS 执行；但是，您需要关注 DevTools 窗口才能正常工作。如果您需要暂停而不关注 DevTools 窗口，您可以将

Answer 5

语句绑定到按键事件，如下所示：

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

在控制台中运行此代码片段将添加一个侦听器，当您按 F12 时，该侦听器会暂停代码执行。

我知道这可能听起来很奇怪，但你可以使用键盘“Tab”按钮来做到这一点。

Answer 6

按 F12 -> 检查元素 -> 将鼠标悬停在元素上 -> 离开鼠标（！重要） -> 按“tab”直到到达元素的样式部分 -> 按“Enter”开始编辑样式标签 - > 使用“tab”在样式部分中移动。

虽然 @missemm 的答案是最直接的，但 Chrome 中的另一个可用选项是（开发工具面板已打开）触发菜单，然后右键单击要检查的元素并从中选择“查看页面源代码”选项开发工具菜单。这将打开另一个窗口并从您正在检查的窗口中删除焦点，因此如果菜单正在侦听指针事件，则不会触发它。只需关闭“页面源”选项卡，只要将鼠标远离原始窗口视口，菜单就会保持打开状态，但您仍然可以使用开发工具面板。

Answer 7

如果您通常需要同时按“fn”和“f8”（这对于单手来说是一种伸展），有时这会更方便。

也可以使用纯 JavaScript：

Answer 8

my_elem = document.getElementById('menu')

const mouseoverEvent = new Event('mouseover');

my_elem.dispatchEvent(mouseoverEvent);

参考答案