Inspect element that only appear when other element is mouse overed/entered

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.

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?

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

19328 次浏览
小开
最佳答案

It's fairly easy in Chrome 38.0.2094.0.

看起来是这样的:

一步一步来:

  1. 在“来源”面板中打开 DevTools
  2. Make the tooltip appear by hovering over the button
  3. 按 F8冻结页面
  4. 切换到 Elements 面板，使用左上角的放大镜图标来选择工具提示

如果工具提示是因为 CSS 而显示的，那么在这种情况下您可以这样做:

一步一步来:

  1. 打开 DevTools
  2. 选择 dev 工具中的触发元素(链接)
  3. 右键单击并选择“强制元素状态”，然后选择“ : 悬停”
  4. 检查 CSS 工具提示
小开

Safari 和 Chrome 的网络检查器都提供了复选框，在这些复选框中，你可以切换元素的 :active、 :focus、 :hover和 :visited状态。使用这些可能更容易。

Safari:

The checkboxes in Safari

Chrome:

The checkboxes in Chrome

小开

还有另一种棘手的方法:

  1. Go over the element which makes your tooltip appear.
  2. 右击可打开上下文菜单。
  3. 将鼠标移动到开发工具窗口，左键单击开发工具面板中的任何位置。

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

在 Chrome 上测试过，似乎在 Firefox 上不起作用。

小开

虽然 @ 有人的回答是非常优秀的(t-up 为动画 gif) ，作为一个替代方案，您总是可以以编程方式完成它。只需打开控制台并键入事件名称

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

(纯 javascript 特定语法可能因浏览器而异)

使用 jQuery 更容易:

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

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

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

工具提示出现在 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>

如注释中所示，如果将鼠标指针移动到页面框架上，则可以触发其他事件，如 mouseout。为了防止这种情况，您可以按 F8(如在 acc 中)。或键入 debugger;(这是它的脚本等价物)


提交答案