在 chrome 调试器/DevTools 面板中冻结屏幕以进行弹出框检查? [英] Freeze screen in chrome debugger / DevTools panel for popover inspection?

问题描述

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

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 或 option + ⌘ + J 在 macOS 上
3. 在 Chrome 检查器中选择 Sources 标签
4. 在网络浏览器窗口中，将鼠标悬停在所需元素上以启动弹出框
5. 在显示弹出窗口时在 Windows/Linux 上按 F8(或在 macOS 上按 fn + F8).如果您点击了实际页面上的任意位置，F8 将什么也不做.您的最后一次点击需要位于检查器中的某个位置，例如来源"标签
6. 转到检查器中的 Elements 标签
7. 找到您的弹出框(它将嵌套在触发器元素的 HTML 中)
8. 祝您修改 CSS 愉快

1. Browse to the desired page
2. Open the dev console - F12 on Windows/Linux or option + ⌘ + J on macOS
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 macOS) 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 面板中冻结屏幕以进行弹出框检查?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！