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

Posted 2023-03-07

【中文标题】在 Chrome 开发者工具中检查 Javascript Hover

【英文标题】：Inspect Javascript Hover in Chrome Developer Tools

【发布时间】：2014-10-20 01:14:07

【问题描述】：

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

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

代码示例：

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

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

【问题讨论】：

在inspector中右击元素节点->强制元素状态->悬停

这是一个没有好的答案的好问题。它应该有更多的选票。

【参考方案1】：

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

【讨论】：

非常方便，只需按一下键！

虽然 OS X 上的 Chrome 声称 F8 可以做到这一点，但它也显示了 command-\（反斜杠）作为同一件事的另一个组合键。只有 command-\ 对我有用。

请注意，只有当您在 DevTools 的“Sources”选项卡中同时按下 F8 时它才有效。

【参考方案2】：

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

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

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

【讨论】：

这只适用于 CSS 我正在寻找一种适用于 Javascript 的解决方案。谢谢

参见编辑到原版。发布

我进行了修改，因此该功能由不同的元素触发，因为它不起作用 - 由于将鼠标移出元素时悬停隐藏了它。我还想提一下，不能在 Chrome 开发工具控制台中添加此代码。理想情况下，这是我可以测试悬停的地方。

【参考方案3】：

获取以下菜单的 sn-p，该菜单显示悬停时的下拉菜单：

$('#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>

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

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

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

$('#dropdown');

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

【参考方案4】：

什么对我有用：

在 chrome 开发工具 Elements 标签：

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

【讨论】：

这正是我想要的

【参考方案5】：

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

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

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

【参考方案6】：

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

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

【参考方案7】：

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

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