检查仅在其他元素被鼠标覆盖/输入时出现的元素

Often I want to inspect an element (e.g. tooltip) that only appears when another element is mouse overed/entered. The element that appears, is made visible via jQuery's mouseenter event.

通常我想检查一个元素（例如工具提示），该元素仅在鼠标被覆盖/输入时出现。出现的元素通过jQuery的mouseenter事件可见。

I can't inspect the tooltip, since the tooltip disappears when my mouse leaves the containing element.

我无法检查工具提示，因为当我的鼠标离开包含元素时，工具提示会消失。

Is there a way to pause JS events so I could hover on the element, then pause the browser's JS, and successfully inspect it?

有没有办法暂停JS事件，所以我可以悬停在元素上，然后暂停浏览器的JS，并成功检查它？

For an example, try inspecting Twitter bootstrap's tooltips: http://getbootstrap.com/javascript/#tooltips.

例如，尝试检查Twitter bootstrap的工具提示：http：//getbootstrap.com/javascript/#tooltips。

4 个解决方案

#1

It's fairly easy in Chrome 38.0.2094.0.

在Chrome 38.0.2094.0中相当容易。

Here's what it'll look like:

这是它的样子：

Step-by-step:

一步步：

1. Open the DevTools in the Sources panel
2. 在Sources面板中打开DevTools
3. Make the tooltip appear by hovering over the button
4. 将鼠标悬停在按钮上即可显示工具提示
5. Press F8 to freeze the page
6. 按F8冻结页面
7. Switch to the Elements panel and use the magnifying glass icon in the top left to select the tooltip
8. 切换到“元素”面板，然后使用左上角的放大镜图标选择工具提示

If the tooltip shows up because of CSS, here's what you can do in that case:

如果工具提示因CSS而显示，那么在这种情况下您可以执行以下操作：

Step-by-step:

一步步：

1. Open the DevTools
2. 打开DevTools
3. Select the triggering element in the dev tools (the link)
4. 在开发工具中选择触发元素（链接）
5. Right click, and select "force element state", and select ":hover"
6. 右键单击，选择“强制元素状态”，然后选择“：悬停”
7. Inspect the CSS tooltip
8. 检查CSS工具提示

#2

Both Safari's and Chrome's Web Inspector offers checkboxes where you can toggle the :active, :focus, :hover and :visited state of an element. Using those might be even easier.

Safari和Chrome的Web Inspector都提供了复选框，您可以在其中切换元素的：active，：focus，：hover和：visited状态。使用它们可能更容易。

Safari:

苹果浏览器：

Chrome:

铬：

#3

There's also another tricky way to do it :

还有另一个棘手的方法：

1. Go over the element which makes your tooltip appear.
2. 浏览使您的工具提示出现的元素。
3. Right click to open the contextual menu.
4. 右键单击以打开上下文菜单。
5. Move your mouse to your dev tool window and left click anywhere in the dev tool panel.
6. 将鼠标移动到开发工具窗口，然后在开发工具面板中的任意位置单击鼠标左键。

Your tooltip will stay visible, you will then be able to inspect it in the Element tab.

您的工具提示将保持可见，然后您可以在“元素”选项卡中检查它。

Tested on Chrome. Doesn't seem to work on Firefox.

在Chrome上测试过。似乎不适用于Firefox。

#4

While @SomeGuy's answer is excellent (t-up for animated gifs), as an alternative you can always do it programmatically. Just pop open the console and type in the event name

虽然@ SomeGuy的答案非常出色（对于GIF动画来说），但作为替代方案，您可以随时以编程方式进行操作。只需弹出控制台并输入事件名称即可

document.getElementById('id').dispatchEvent(new Event('event-type'));

(with pure javascript specific syntax may vary by browser)

（使用纯JavaScript特定语法可能因浏览器而异）

Even easier with jQuery:

使用jQuery更容易：

$('#id').trigger('event-type');

In your example (http://getbootstrap.com/javascript/#tooltips), open the console and type in, for example:

在您的示例中（http://getbootstrap.com/javascript/#tooltips），打开控制台并输入，例如：

$("button:contains('Tooltip on right')").mouseenter();

And the tooltip appears in the DOM and can be manually inspected/modified:

工具提示出现在DOM中，可以手动检查/修改：

<div style="top: 14406.9px; left: 1048.25px; display: block;"
id="tooltip952596" class="tooltip fade right in" role="tooltip">
<div style="" class="tooltip-arrow"></div>
<div class="tooltip-inner">Tooltip on right</div></div>

---

As in the comments, if you move the mouse pointer over the page frame, you can trigger other events such as mouseout. To prevent this you can press F8 (as in the acc. answer) or type debugger; (which is its script equivalent)

与注释中一样，如果将鼠标指针移到页面框架上，则可以触发其他事件，例如mouseout。要防止这种情况，您可以按F8（如在acc。答案中）或键入调试器; （这是它的脚本等价物）