在Chrome调试器/ DevTools面板中的冻结屏幕popover检查？ [英] Freeze screen in chrome debugger / DevTools panel for popover inspection?

问题描述

您好，我使用chrome检查器来尝试和分析 z-index 的twitter bootstrap popover，并发现它非常令人沮丧...

Hi I'm using the chrome inspector to try and analyze the z-index of a twitter bootstrap popover, and finding it extremely frustrating...

有没有办法冻结弹出框（显示时），以便我可以评估和修改关联的CSS？

Is there a way to freeze the popover (while shown) so that I can assess and modify the associated CSS?

放置相关链接上的固定悬停不会导致弹出窗口出现。

Placing a fixed 'hover' on the associated link does not cause the popover to appear.

推荐答案

这是我的程序：

1. 浏览到所需的页面


2. 在Windows / Linux上的 F12 或在OSX上的选项 + ⌘ + J


3. 在chrome检查器中选择来源标签


4. 在网络浏览器窗口中，将鼠标悬停在所需的元素上，


5. 在Windows / Linux上（或在OSX上使用 fn + F8 ）点击 F8 显示。 如果你在实际页面上的任何地方点击F8将什么也不做。您最后一次点击需要位于检查器中的某个位置，例如来源标签


6. 转到检查器中的元素


7. 查找您的popover（它将嵌套在触发元素的HTML中）


8. 有趣修改CSS

1. Browse to the desired page
2. Open the dev console - F12 on Windows/Linux or option + ⌘ + J on OSX
3. Select the Sources tab in chrome inspector
4. In the web browser window, hover over the desired element to initiate the popover
5. Hit F8 on Windows/Linux (or fn + F8 on OSX) while the popover is showing. If you have clicked anywhere on the actual page F8 will do nothing. Your last click needs to be somewhere in the inspector, like the sources tab
6. Go to the Elements tab in inspector
7. Find your popover (it will be nested in the trigger element's HTML)
8. Have fun modifying the CSS

这篇关于在Chrome调试器/ DevTools面板中的冻结屏幕popover检查？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！