在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打开开发工具,然后单击右上角的切换元素状态.在这里,您可以激活悬停状态

更新: 你可以触发hover/mouseover/mouseenter事件,说它的点击事件:

$("#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. 当浏览器在相关子树修改时暂停时，检查相关子元素。