在Chromedebugging器/ DevTools面板冻结屏幕popover检查？
我使用铬检查器来尝试和分析twitter引导popover的z-index ，并发现它非常令人沮丧…
有没有办法冻结popover（虽然显示），以便我可以评估和修改相关的CSS？
在关联的链接上放置一个固定的“hover”不会导致出现popup窗口。
得到它的工作。 这是我的程序：
- 浏览到所需的页面
- 在Windows / Linux上打开开发控制台 – F12或在OSX上select + ⌘ + J
- 在Chrome检查器中select
Sources选项卡 - 在Web浏览器窗口中，将鼠标hover在所需的元素上以启动popup窗口
- popup窗口显示时，在Windows / Linux（或OSX上的Fn + F8）上按F8键 。 如果您在实际页面的任何地方点击过，F8将不会执行任何操作。 您最后一次点击需要在检查器中的某处，如来源标签
- 转到检查器中的
Elements选项卡 - find你的popover（它将被嵌套在触发器元素的HTML中）
- 玩得开心修改CSS
为了能够检查任何元素，请执行以下操作。 这应该工作，即使很难重复hover状态：
-
在控制台中运行以下JavaScript。 这将在5秒内进入debugging器。
setTimeout(function(){debugger;}, 5000) -
去显示你的元素（通过hover或然而），并等待，直到Chrome中断入debugging器。
- 现在点击Chrome Inspector中的
Elements标签，你可以在那里寻找你的元素。 - 您也可以点击“
Find Element图标（看起来像一个放大镜），Chrome将让你去检查，并通过右键单击它find你的元素，然后selectInspect Element
请注意，这个方法是在这个页面上的其他很好的答案略有变化。
我也有同样的问题，我想我find了一个“通用”的解决scheme。 （假设网站使用jQuery）
希望它可以帮助别人！
- 转到检查器中的元素选项卡
- 右键点击
<body>然后点击“ Edit as HTML ” - 在
<body>后添加以下元素，然后按Ctrl + Enter：
<div id="debugFreeze" data-rand="0"></div> - 右键点击这个新元素，select“Break on …” – >“Attributes modifications”
- 现在转到控制台视图并运行以下命令：
setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000); - 现在返回到浏览器窗口，你有5秒钟find你的元素，然后单击/hover/焦点/等，在断点将被击中，浏览器将“冻结”。
- 现在你可以平静地检查你的点击/hover/集中/等元素。
当然你可以修改javascript和时间，如果你明白了。
更新：正如Brad Parks在他的评论中所写的，只有一行JS代码有更好更简单的解决scheme：
运行这个JavaScript而不是
setTimeout(function(){debugger;}, 5000);，然后去显示你的元素，并等待，直到它进入debugging器
- 右键单击元素标签内的任何地方
- selectBreakon ...> 子树修改
- 触发你想要看到的popup窗口，如果它看到DOM的变化，它将会冻结
- 如果您仍然看不到popup窗口，请单击在Chrome上部顶部中心旁边的
Resume(F8)旁边Step over the next function(F10)button，直到您冻结要查看的popup窗口。
我发现这在Chrome中运行得非常好。
右键单击要检查的元素，然后单击强制元素状态>hover。 附上截图。
