冻结屏幕在chrome调试器/ DevTools面板弹出窗口检查?

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

是否有一种方法来冻结弹窗(而显示)，以便我可以评估和修改相关的CSS?

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

245246 次浏览
小开
最佳答案

让它工作。以下是我的步骤:

  1. 浏览到所需的页面
  2. 打开开发控制台—Windows/Linux为F12, macOS为选项 + ⌘ + J
  3. 在chrome检查器中选择Sources选项卡
  4. 在web浏览器窗口中，将鼠标悬停在所需元素上以启动弹出窗口
  5. 当弹出窗口显示时，在Windows/Linux上按F8(或在macOS上按fn + F8)。# EYZ3
  6. 在检查器中转到Elements选项卡
  7. 找到你的弹出窗口(它将嵌套在触发器元素的HTML中)
  8. 有乐趣修改CSS
小开

< >强更新: 正如Brad Parks在他的评论中所写的，有一个更好更简单的解决方案，只需要一行JS代码:

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

最初的回答:

我只是遇到了同样的问题，我想我找到了一个“通用”的解决方案。# EYZ0 < br > 希望它能帮助到一些人!< / p >
  1. 转到检查器中的元素选项卡
  2. 右键单击<body>，然后单击编辑为HTML
  3. 在<body>后面添加以下元素，然后按Ctrl+Enter:
    <div id="debugFreeze" data-rand="0"></div>
  4. 右键单击这个新元素，并选择“休息……”>“属性修改”
  5. 现在进入控制台视图，执行以下命令:
    setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
  6. 现在回到浏览器窗口，你有5秒钟的时间找到你的元素，然后点击/悬停/聚焦/等等，在断点被击中之前，浏览器会“冻结”。
  7. 现在你可以平静地检查你的点击/悬停/聚焦/等等元素了。

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

小开
  1. 右键单击元素标签中的任意位置
  2. 选择# EYZ0 # EYZ1
  3. 触发你想要看到的弹出窗口，如果它在DOM中看到变化，它就会冻结
  4. 如果你仍然没有看到弹出框，点击chrome顶部中心Resume(F8)旁边的Step over the next function(F10)按钮，直到冻结你想看到的弹出框。
小开

要能够检查任何元素，请执行以下操作。这应该工作，即使很难复制悬停状态:

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

    # EYZ0 < / p >

  • 去显示你的元素(通过悬停或其他方式)，等待Chrome进入调试器。

  • 现在点击Chrome检查器中的Elements选项卡，你可以在那里寻找你的元素。
  • 你也可以点击Find Element图标(看起来像一个放大镜)，Chrome会让你去检查和找到你的元素在页面上右键点击它，然后选择Inspect Element

注意，这种方法与本页上的另一个伟大的回答略有不同。

小开

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

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

Force element state

小开

我试过其他的解，它们都有效，但我很懒，所以这就是我的解

  1. 将鼠标悬停在元素上以触发展开状态
  2. # EYZ0 + # EYZ1 + # EYZ2
  3. 再次悬停在元素上
  4. 右击
  5. 导航到调试器

通过右键点击它不再注册鼠标事件，因为一个上下文菜单弹出，所以你可以安全地移动鼠标

小开

以前我的Chrome冻结功能不工作按f8快捷键，我使用这个走动，去源选项卡，只需点击暂停/播放脚本执行按钮在Chrome开发工具在源选项卡的右面板，我的快捷键得到了修复，并从那时开始工作，真的感谢充分，修复了我的问题

小开
没有一个解决方案对我有效，只有一个如上所述: # EYZ0 < / p >

对于Linux (Mac使用命令代替控制):

  • 打开开发工具(ctrl + shift + I)
  • 运行命令窗口(ctrl + shift + P)
  • 开始输入javascript并选择禁用javascript

说明截图:

enter image description here

小开

如果右击元素，则冻结浏览器。

enter image description here

小开

我最近遇到了这个问题，按F8解决方案对我不起作用。下面是我如何冻结悬停元素。

  1. 右键单击Chrome中的悬浮标签，并在Elements选项卡中选择它。
  2. 在右侧窗口中，选择Event Listeners
  3. 展开mouseout事件
  4. 点击这里显示的remove按钮。
  5. 现在如果你将鼠标悬停在你的元素上，它将触发mouseover事件，但当你的光标离开元素时，它不会触发mouseout事件，因为我们删除了它。

希望这对你有所帮助


提交答案