我正在使用chrome检查器来尝试分析Twitter引导程序popover的 z-index ，并发现它非常令人沮丧......
z-index
有没有办法冻结popover（显示），以便我可以评估和修改相关的CSS？
在关联的链接上放置固定的“悬停”不会导致弹出窗口出现 .
我在这里尝试了其他解决方案，但是我很懒，所以这是我的解决方案
将鼠标悬停在元素上以触发展开状态
ctrl shift c
再次悬停在元素上
右键单击
导航到调试器
通过右键单击它不再注册鼠标事件，因为弹出上下文菜单，因此您可以安全地移动鼠标
我发现这在Chrome中运行得非常好 .
右键单击要检查的元素，然后单击“强制元素状态”>“悬停” . 附上截图 .
我只是遇到了同样的问题，我想我找到了一个"universal"解决方案 . （假设网站使用jQuery）希望它可以帮到某人！
转到检查器中的元素选项卡
右键单击 <body> 并单击“编辑为HTML”
<body>
在 <body> 之后添加以下元素，然后按Ctrl Enter：<div id="debugFreeze" data-rand="0"></div>
<div id="debugFreeze" data-rand="0"></div>
右键单击此新元素，然后选择"Break on..." - > "Attributes modifications"
现在转到Console视图并运行以下命令：setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
现在回到浏览器窗口，你有5秒的时间找到你的元素并点击/ hover / focus / etc它，然后点击断点，浏览器将"freeze" .
现在您可以安心地检查您的clicked / hovered / focused / etc元素 .
当然，如果你明白了，你可以修改javascript和时间 .
UPDATE: 正如布拉德·帕克斯（Brad Parks）在他的评论中写道的那样，只有一行JS代码就有了更好更简单的解决方案：
运行这个javascript而不是setTimeout（function（）{debugger;}，5000）;然后去显示你的元素并等到它进入调试器
右键单击“元素”选项卡中的任意位置
选择Breakon ...>子树修改
触发要查看的弹出窗口，如果它看到DOM中的更改，它将冻结
如果仍然没有看到弹出窗口，请单击Chrome中上方中间 Resume(F8) 旁边的 Step over the next function(F10) 按钮，直到冻结要查看的弹出窗口 .
Resume(F8)
Step over the next function(F10)
Got it working. Here was my procedure:
浏览到所需的页面
在Windows / Linux上打开开发控制台 - F12或在OSX上打开选项⌘J
在chrome检查器中选择 Sources 选项卡
Sources
在Web浏览器窗口中，将鼠标悬停在所需元素上以启动弹出窗口
在弹出窗口显示时，在Windows / Linux（或OSX上的fn F8）上按F8 . 如果你点击了实际页面上的任何地方，F8将什么都不做 . 您的最后一次点击需要位于检查器中的某个位置，例如“源”选项卡
转到检查器中的 Elements 选项卡
Elements
找到你的popover（它将嵌套在trigger元素的HTML中）
修改CSS很有趣
为了能够检查任何元素，请执行以下操作 . 即使很难复制悬停状态，这也应该有效：
setTimeout(function(){debugger;}, 5000)
Go显示您的元素（通过悬停或然而）等待Chrome进入调试器 .
现在点击Chrome Inspector中的 Elements 标签，您可以在那里查找您的元素 .
您也可以点击 Find Element 图标（看起来像放大镜），Chrome会让您通过右键单击检查并在页面上找到您的元素，然后选择 Inspect Element
Find Element
Inspect Element
请注意，此方法与此页面上的其他great answer略有不同 .
6 回答
我在这里尝试了其他解决方案，但是我很懒，所以这是我的解决方案
将鼠标悬停在元素上以触发展开状态
ctrl shift c
再次悬停在元素上
右键单击
导航到调试器
通过右键单击它不再注册鼠标事件，因为弹出上下文菜单，因此您可以安全地移动鼠标
我发现这在Chrome中运行得非常好 .
右键单击要检查的元素，然后单击“强制元素状态”>“悬停” . 附上截图 .
我只是遇到了同样的问题，我想我找到了一个"universal"解决方案 . （假设网站使用jQuery）
希望它可以帮到某人！
转到检查器中的元素选项卡
右键单击
<body>并单击“编辑为HTML”在
<body>之后添加以下元素，然后按Ctrl Enter：<div id="debugFreeze" data-rand="0"></div>右键单击此新元素，然后选择"Break on..." - > "Attributes modifications"
现在转到Console视图并运行以下命令：
setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);现在回到浏览器窗口，你有5秒的时间找到你的元素并点击/ hover / focus / etc它，然后点击断点，浏览器将"freeze" .
现在您可以安心地检查您的clicked / hovered / focused / etc元素 .
当然，如果你明白了，你可以修改javascript和时间 .
UPDATE: 正如布拉德·帕克斯（Brad Parks）在他的评论中写道的那样，只有一行JS代码就有了更好更简单的解决方案：
右键单击“元素”选项卡中的任意位置
选择Breakon ...>子树修改
触发要查看的弹出窗口，如果它看到DOM中的更改，它将冻结
如果仍然没有看到弹出窗口，请单击Chrome中上方中间
Resume(F8)旁边的Step over the next function(F10)按钮，直到冻结要查看的弹出窗口 .Got it working. Here was my procedure:
浏览到所需的页面
在Windows / Linux上打开开发控制台 - F12或在OSX上打开选项⌘J
在chrome检查器中选择
Sources选项卡在Web浏览器窗口中，将鼠标悬停在所需元素上以启动弹出窗口
在弹出窗口显示时，在Windows / Linux（或OSX上的fn F8）上按F8 . 如果你点击了实际页面上的任何地方，F8将什么都不做 . 您的最后一次点击需要位于检查器中的某个位置，例如“源”选项卡
转到检查器中的
Elements选项卡找到你的popover（它将嵌套在trigger元素的HTML中）
修改CSS很有趣
为了能够检查任何元素，请执行以下操作 . 即使很难复制悬停状态，这也应该有效：
setTimeout(function(){debugger;}, 5000)Go显示您的元素（通过悬停或然而）等待Chrome进入调试器 .
现在点击Chrome Inspector中的
Elements标签，您可以在那里查找您的元素 .您也可以点击
Find Element图标（看起来像放大镜），Chrome会让您通过右键单击检查并在页面上找到您的元素，然后选择Inspect Element请注意，此方法与此页面上的其他great answer略有不同 .