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

Question

我正在使用 chrome 检查器尝试分析z-indextwitter bootstrap 弹出窗口，发现它非常令人沮丧......

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

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

score 828 · Accepted Answer

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

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

score 377 · Accepted Answer

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

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

setTimeout(function(){debugger;}, 5000)
去显示你的元素（通过悬停或然而）并等到 Chrome 进入调试器。
现在单击ElementsChrome Inspector 中的选项卡，您可以在那里查找您的元素。
您也可以单击Find Element图标（看起来像放大镜），Chrome 会让您通过右键单击它来检查并在页面上找到您的元素，然后选择Inspect Element

score 94 · Accepted Answer

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

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

原答案：

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

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

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

score 48 · Accepted Answer

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

score 17 · Accepted Answer

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

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

力元状态

score 3 · Accepted Answer

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

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

score 0 · Accepted Answer

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

7 回答 7