在Chromedebugging器/ DevTools面板冻结屏幕popover检查?

我使用铬检查器来尝试和分析twitter引导popover的z-index ,并发现它非常令人沮丧…

有没有办法冻结popover(虽然显示),以便我可以评估和修改相关的CSS?

在关联的链接上放置一个固定的“hover”不会导致出现popup窗口。

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

  1. 浏览到所需的页面
  2. 在Windows / Linux上打开开发控制台 – F12或在OSX上select + + J
  3. 在Chrome检查器中selectSources选项卡
  4. 在Web浏览器窗口中,将鼠标hover在所需的元素上以启动popup窗口
  5. popup窗口显示时,在Windows / Linux(或OSX上的Fn + F8)按F8键如果您在实际页面的任何地方点击过,F8将不会执行任何操作。 您最后一次点击需要在检查器中的某处,如来源标签
  6. 转到检查器中的Elements选项卡
  7. find你的popover(它将被嵌套在触发器元素的HTML中)
  8. 玩得开心修改CSS

为了能够检查任何元素,请执行以下操作。 这应该工作,即使很难重复hover状态:

  • 在控制台中运行以下JavaScript。 这将在5秒内进入debugging器。

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

  • 去显示你的元素(通过hover或然而),并等待,直到Chrome中断入debugging器。

  • 现在点击Chrome Inspector中的Elements标签,你可以在那里寻找你的元素。
  • 您也可以点击“ Find Element图标(看起来像一个放大镜),Chrome将让你去检查,并通过右键单击它find你的元素,然后selectInspect Element

请注意,这个方法是在这个页面上的其他很好的答案略有变化。

我也有同样的问题,我想我find了一个“通用”的解决scheme。 (假设网站使用jQuery)
希望它可以帮助别人!

  1. 转到检查器中的元素选项卡
  2. 右键点击<body>然后点击“ Edit as HTML
  3. <body>后添加以下元素,然后按Ctrl + Enter:
    <div id="debugFreeze" data-rand="0"></div>
  4. 右键点击这个新元素,select“Break on …” – >“Attributes modifications”
  5. 现在转到控制台视图并运行以下命令:
    setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
  6. 现在返回到浏览器窗口,你有5秒钟find你的元素,然后单击/hover/焦点/等,在断点将被击中,浏览器将“冻结”。
  7. 现在你可以平静地检查你的点击/hover/集中/等元素。

当然你可以修改javascript和时间,如果你明白了。

更新:正如Brad Parks在他的评论中所写的,只有一行JS代码有更好更简单的解决scheme:

运行这个JavaScript而不是setTimeout(function(){debugger;}, 5000); ,然后去显示你的元素,并等待,直到它进入debugging器

  1. 右键单击元素标签内的任何地方
  2. selectBreakon ...> 子树修改
  3. 触发你想要看到的popup窗口,如果它看到DOM的变化,它将会冻结
  4. 如果您仍然看不到popup窗口,请单击在Chrome上部顶部中心旁边的Resume(F8)旁边Step over the next function(F10)button,直到您冻结要查看的popup窗口。

我发现这在Chrome中运行得非常好。

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

强制元素状态