检查仅在鼠标悬停/进入其他元素时才会显示的元素
我经常想检查一个元素(例如工具提示),该元素仅在鼠标悬停/输入另一个元素时才会出现.通过jQuery的mouseenter事件使显示的元素可见.
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.
有没有一种方法可以暂停JS事件,以便我可以将鼠标悬停在该元素上,然后暂停浏览器的JS并成功对其进行检查?
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?
例如,尝试检查Twitter引导程序的工具提示: http://getbootstrap.com/javascript/#tooltips .
For an example, try inspecting Twitter bootstrap's tooltips: http://getbootstrap.com/javascript/#tooltips.
在Chrome 38.0.2094.0中相当简单.
It's fairly easy in Chrome 38.0.2094.0.
这是它的样子:
分步操作:
- 在源"面板中打开DevTools
- 将鼠标悬停在按钮上可使工具提示出现
- 按F8键冻结页面
- 切换到元素"面板,然后使用左上角的放大镜图标选择工具提示
如果由于CSS而显示工具提示,那么在这种情况下,您可以执行以下操作:
If the tooltip shows up because of CSS, here's what you can do in that case:
分步操作:
- 打开DevTools
- 在开发工具(链接)中选择触发元素
- 右键单击,然后选择力元素状态",然后选择:hover"
- 检查CSS工具提示