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

Inspect Javascript Hover in Chrome Developer Tools

提问by raison

I have some Javascript which displays an element on hover. I want to style this element and therefore need to trigger the hover state in the browser using Chrome Dev Tools.

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

This is easy to do with CSS where you can set the state of an element within Dev Tools. What is the best way to do this with Javascript?

使用 CSS 可以轻松实现这一点，您可以在其中设置 Dev Tools 中元素的状态。使用 Javascript 执行此操作的最佳方法是什么？

Code Example:

代码示例：

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

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

采纳答案by T Nguyen

Take the below snippet of a menu which shows a dropdown on hover:

下面是一个菜单片段，它显示悬停时的下拉菜单：

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

Copy this snippet into a local document, as Chrome Dev Tools will not allow you to use Javascript to select any element in this iframe. Then, in your Dev Tools Console, run:

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

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

This will show the dropdown menu, which has a really ugly, unstyled list. Now, instead of using your mouse to right-click the element and selecting "Inspect Element", which I would imagine is how your're used to doing things, run in your Console:

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

$('#dropdown');

Or whatever selector for whichever element you want to style/manipulate. The Console will show the result of your statement, which is the relevant jQuery object. Now right click on that object in your Console and select Reveal in Elements Panel. Now you can use the Styles tab as you're used to, and your mouse has never triggered the mouseoutevent, ending the hover.

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

回答by mrbut

Another alternative would be to hover over the element with your mouse and press F8 (this will only work in Chrome) to pause the script execution. The hover state will remain in visible to you.

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

回答by Fueled By Coffee

Open dev tools by pressing F12and click the toggle element state in the top right corner. Here you can activate the hover state

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

Update:You can trigger the hover/mouseover/mouseenter events on say it's click event:

更新：您可以触发悬停/鼠标悬停/鼠标输入事件，说它是点击事件：

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

回答by Ian deBoisblanc

Per the other answers, you can pause JS execution via the DevTools shortcuts; however, you need to focus on the DevTools window for this to work. If you need to pause without focussing on the DevTools window, you can bind a debuggerstatement to a keypress event like so:

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

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

Running this snippet in the console will add a listener which pauses the code execution when you press F12.

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

回答by tv13

While @missemm 's answer is the most straightforward, another useable option in Chrome is (with the dev tools panel already open) trigger the menu, then right click on the element you want to inspect and choose 'View Page Source' option from the Dev Tools menu. This opens another window and removes the focus from the window you were inspecting, so if the menu is listening for a pointerout event it won't be triggered. Just close the Page Source tab and as long as you keep your mouse clear of the original window viewport, the menu will stay open, but you can still use the dev tools panel.

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

This is sometimes more convenient if you normally need to press 'fn' and 'f8' at the same time (which is a stretch to do one-handed).

如果您通常需要同时按 'fn' 和 'f8'（这是单手操作的延伸），这有时会更方便。