在chrome debugger / DevTools面板中冻结屏幕以进行弹出检查？

时间：2013-07-29 18:32:24

标签： css google-chrome google-chrome-devtools

我正在使用chrome检查器尝试分析Twitter引导程序弹出窗口的z-index，并发现它非常令人沮丧......

有没有办法冻结popover（显示），以便我可以评估和修改相关的CSS？

固定＆＃39;悬停＆＃39;在关联的链接上不会导致弹出窗口出现。

8 个答案:

答案 0 :(得分：574)

搞定了。这是我的程序：

  1. 浏览所需的页面
  2. 在Windows / Linux上打开开发控制台 - F12 或在OSX上打开选项 + ⌘ + J / LI>
  3. 选择Chrome检查器中的Sources标签
  4. 在网络浏览器窗口中，将鼠标悬停在所需元素上以启动弹出窗口
  5. 在弹出窗口显示时，在Windows / Linux上按 F8 （或在OSX上按 fn + F8 ）。 如果您点击了实际页面上的任何位置，F8将无能为力。您的最后一次点击需要位于检查器中的某个位置，例如“源”选项卡
  6. 转到检查员
    7. 中的Elements标签
  7. 找到你的popover（它将嵌套在trigger元素的HTML中）
  8. 乐于修改CSS

答案 1 :(得分：206)

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

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

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

  • Go显示您的元素（通过悬停或然而然后）等待Chrome进入调试器。

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

请注意，此方法与此页面上的其他great answer略有不同。

答案 2 :(得分：42)

<强>更新 正如布拉德·帕克斯（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 ...” - ＆gt; “属性修改”
  5. 现在转到控制台视图并运行以下命令：
    setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
  6. 现在回到浏览器窗口，你有5秒的时间找到你的元素并点击/ hover / focus / etc，然后点击断点，浏览器将“冻结”。
  7. 现在，您可以安心地检查点击/悬停/聚焦/等元素。

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

答案 3 :(得分：26)

  1. 右键单击“元素选项卡”
    2. 中的任意位置
  2. 选择 Breakon ...＆gt; 子树修改
  3. 触发您想要查看的弹出窗口，如果它看到DOM中的更改，它将会冻结
  4. 如果您仍然没有看到弹出窗口，请点击Chrome中上方中间Step over the next function(F10)旁边的Resume(F8)按钮，直到您冻结要查看的弹出窗口。

答案 4 :(得分：11)

我发现这在Chrome中效果非常好。

右键单击要检查的元素，然后单击“强制元素状态”＆gt;徘徊。附上截图。

Force element state

答案 5 :(得分：0)

我的简单方法：

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

答案 6 :(得分：0)

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

答案 7 :(得分：-1)

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

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

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

相关问题
最新问题