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

Question

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

使用CSS很容易，您可以在Dev Tools中设置元素的状态。使用Javascript进行此操作的最佳方法是什么？

代码示例：

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

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

Answer 1

另一种方法是用鼠标悬停在元素上并按F8（这只适用于Chrome）暂停脚本执行。悬停状态将保持对您可见。

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中的任何元素。然后，在Dev Tools控制台中，运行：

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

这将显示下拉菜单，其中包含一个非常丑陋，没有样式的列表。现在，不要使用鼠标右键单击元素并选择“Inspect Element”，我想这就是你习惯做事的方式，在你的控制台中运行：

$('#dropdown');

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

Answer 4

对我有用的东西

在chrome开发工具的元素标签上：

1. 右键单击悬停时更改的元素的父级
2. 选择中断-> 子树修改
3. 在浏览器因相关子树修改而暂停时检查相关的子元素。

Answer 5

根据其他答案，您可以通过DevTools快捷方式暂停JS执行;但是，您需要关注DevTools窗口才能使其正常工作。如果您需要暂停而不关注DevTools窗口，可以将debugger语句绑定到按键事件，如下所示：

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

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

Answer 6

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

如果您通常需要同时按一下“ fn”和“ f8”（单手操作很费力），这有时会更方便。

Answer 7

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

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