在 chrome 调试器/DevTools 面板中冻结屏幕以进行弹出窗口检查？

Question

我正在使用 chrome 检查器尝试分析 twitter 引导弹出窗口的 z-index ，发现它非常令人沮丧……

有没有办法冻结弹出框（如图所示），以便我可以评估和修改相关的 CSS？

在关联链接上放置固定的“悬停”不会导致弹出框出现。

原文由 Abram 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

得到它的工作。这是我的程序：

1. 浏览到所需的页面
2. 打开开发控制台 - Windows/Linux 上的 F12 或 macOS 上的 option + ⌘ + J
3. 在 chrome 检查器中选择 Sources 选项卡
4. 在 Web 浏览器窗口中，将鼠标悬停在所需元素上以启动弹出窗口
5. 在弹出窗口显示时，在 Windows/Linux 上 按 F8 （或在 macOS 上按 fn + F8 ）。 如果您点击了实际页面上的任何位置，F8 将不会执行任何操作。您的最后一次单击需要在检查器中的某个位置，例如源选项卡
6. 转到检查器中的 Elements 选项卡
7. 找到您的弹出框（它将嵌套在触发元素的 HTML 中）
8. 玩得开心修改 CSS

原文由 Abram 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

为了能够检查任何元素，请执行以下操作。即使很难复制悬停状态，这也应该有效：

• 在控制台中运行以下 javascript。这将在 5 秒内进入调试器。

setTimeout(function(){debugger;}, 5000)

• 去显示你的元素（通过悬停或其他方式）并等待 Chrome 进入调试器。

• 现在单击 Chrome 检查器中的 Elements 选项卡，您可以在那里查找您的元素。

• 您也可以点击 Find Element 图标（看起来像一个放大镜），Chrome 会让您检查并找到页面上的元素，方法是右键单击它，然后选择 Inspect Element

请注意，此方法与此页面上的其他 出色答案 略有不同。

原文由 Brad Parks 发布，翻译遵循 CC BY-SA 3.0 许可协议