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

Question

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

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

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

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

Answer 2

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

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

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

• 去显示你的元素（通过悬停或然而）并等到 Chrome 进入调试器。

• 现在单击 Chrome Inspector 中的Elements选项卡，您可以在那里查找您的元素。
• 您也可以单击“ Find Element ”图标（看起来像一个放大镜），Chrome 会让您通过右键单击页面来检查并在页面上找到您的元素，然后选择“ Inspect Element ”

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

Answer 3

更新：正如 Brad Parks 在他的评论中所写，只有一行 JS 代码有一个更好、更简单的解决方案：

运行setTimeout(function(){debugger;},5000); ，然后去显示你的元素并等待它进入调试器

---

原答案：

我只是遇到了同样的问题，我想我找到了一个“通用”的解决方案。 （假设网站使用 jQuery）
希望它可以帮助某人！

1. 转到检查器中的元素选项卡
2. 右键单击<body>并单击“编辑为 HTML ”
3. 在<body>之后添加以下元素，然后按 Ctrl+Enter：
   <div id="debugFreeze" data-rand="0"></div>
4. 右键单击这个新元素，然后选择“Break on...”->“属性修改”
5. 现在转到控制台视图并运行以下命令：
   setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
6. 现在回到浏览器窗口，您有 5 秒钟的时间找到您的元素并单击/悬停/聚焦/等，然后断点将被击中并且浏览器将“冻结”。
7. 现在您可以放心地检查您的单击/悬停/聚焦/等元素。

当然，如果你明白的话，你可以修改 javascript 和时间。

Answer 4

1. 右键单击元素选项卡内的任意位置
2. 选择Breakon... >子树修改
3. 触发您想要查看的弹出窗口，如果它看到 DOM 中的更改，它将冻结
4. 如果您仍然看不到弹出窗口，请单击 chrome 顶部顶部中心的Resume(F8)旁边Step over the next function(F10)按钮，直到您冻结要查看的弹出窗口。

Answer 5

我发现这在 Chrome 中非常有效。

右键单击要检查的元素，然后单击强制元素状态 > 悬停。 附上截图。

Answer 6

我在这里尝试了其他解决方案，它们有效但我很懒所以这是我的解决方案

1. 将鼠标悬停在元素上以触发展开状态
2. ctrl + shift + c
3. 再次将鼠标悬停在元素上
4. 右键点击
5. 导航到调试器

通过右键单击它不再注册鼠标事件，因为弹出上下文菜单，因此您可以安全地将鼠标移开

Answer 7

我的简单方法：

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

Answer 8

以前我的 Chrome 冻结功能无法通过按 f8 快捷键来工作，我使用这个四处走动并转到源选项卡，然后单击源选项卡中 chrome 开发工具右侧面板中的暂停/播放脚本执行按钮，我的快捷键是得到修复并从那时开始工作，真的很感谢，解决了我的问题

Answer 9

没有一个解决方案对我有用，只有一个如下所述： https ://developer.chrome.com/docs/devtools/javascript/disable/

对于 Linux（对于 Mac 使用 command 而不是 comtrol ）：

• 打开开发者工具（ ctrl + shift + I ）
• 运行命令窗口（ ctrl + shift + P ）
• 开始输入 javascript 并选择禁用 javascript

指令截图：

Answer 10

如果您右键单击元素，则会冻结浏览器。

Answer 11

我最近遇到了这个问题，按F8解决方案对我不起作用。 这是我冻结 hover 元素的方法。

1. 右键单击 Chrome 中的 hover 和Elements选项卡中的 select 的标签。
2. 在右侧 window、select Event Listeners
3. 展开mouseout事件
4. 单击此处显示的remove按钮。
5. 现在，如果您在元素上使用 hover，它将触发mouseover事件，但当您的光标离开元素时不会触发mouseout ，因为我们已将其删除。

希望这可以帮助。