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

394

我正在使用Chrome检查器尝试分析z-indexTwitter Bootstrap弹出窗口的，发现它非常令人沮丧...

有没有一种方法可以冻结弹出窗口（如图所示），以便我可以评估和修改关联的CSS？

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

css  google-chrome  google-chrome-devtools 
— 亚伯兰
source
7
弹出窗口显示后立即尝试在JavaScript中设置断点（debugger;）
— Hope4You 2013年
5
我window.setTimeout通常debugger在5秒内触发，然后将鼠标悬停在元素上并等待。
— grimmdude
您好，DevTools技术作家在这里。你们都可以给我发送证明问题的MVCE吗？截至2019年，我们有一些工具应该可以解决问题（事件侦听器断点，伪类切换），但是在我能重现您的情况之前，我无法提供详细的答案。
— 凯西巴斯克
— 穆罕默德AbdElFatah
@KayceBasques这是一个示例：telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist单击下拉列表以将其打开，然后尝试在Elements视图中检查列表内容弹出框。
— RMorrisey

Answers:

704

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

  1. 浏览到所需页面
  2. 打开开发者控制台- F12在Windows / Linux或option+ ⌘+上J在MacOS上
  3. 选择 Sources Chrome检查器中标签
  4. 在Web浏览器窗口中，将鼠标悬停在所需元素上以启动弹出窗口
  5. 命中F8在Windows / Linux操作系统（或者fn+ F8在MacOS），而酥料饼被展示。如果您在实际页面上的任何位置单击，F8将不起作用。您的最终点击必须位于检查器中的某处，例如“源”选项卡
  6. 转到Elements检查器中的选项卡
  7. 查找您的弹出窗口（它将嵌套在触发元素的HTML中）
  8. 玩得开心修改CSS
— 亚伯兰
source
9
该工作流程向我简要介绍了断点调试器，并帮助隔离了难以设置样式的菜单，因为该菜单在控制台单击时消失了。
— Trevor Pierce 2014年
22
如果DOM元素使用focusout事件隐藏，则您没有机会击中F8！
— Marcel
2
@Dean触发您需要使用的F8 fn！
— mik01aj 2015年
10
有关更多信息，F8快捷方式实际上是暂停调试器（脚本执行）。并且ctrl + \ 也可以。（cmd + \ 在MacOS中）。
— LeOn-韩立
1
或者，您可以按F8两次
— samdd
274

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

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

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

  • 展示您的元素（通过悬停或滚动），然后等到Chrome闯入调试器。

  • 现在，单击ElementsChrome Inspector中的标签，然后可以在其中查找元素。
  • 您也可以单击Find Element图标（看起来像放大镜），然后Chrome将允许您通过右键单击该页面来检查并找到页面上的元素，然后选择Inspect Element

请注意，此方法与此页面上的其他出色答案略有不同。

— 布莱德公园
source
7
我尊重您对frzsombor的回答给予应有的尊重。很好
— 杰里米·莫里茨
4
这就是我所需要的，因为功能是由于在JS Focus上添加了DOM元素，并在模糊时删除了DOM元素，这种情况通常在切换到开发工具时会发生。
— trudesign 2015年
6
Abram的F8解决方案不适用于我。这个做了。谢谢！
— 拉尔夫
3
谢谢。我用标题：❚❚，地址：做了一个书签javascript:debugger;。F8可以，但是对于那些喜欢使用鼠标的人来说可能会更方便。
— Tymek '17
1
正如其他人所评论的那样，F8答案对我不起作用，并且使我完全发疯！这就像一个魅力。谢谢！
— DoYouEvenCodeBro
70

更新： 正如布拉德·帕克斯（Brad Parks）在他的评论中所写，仅使用一行JS代码，这是一个更好，更轻松的解决方案：

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

原始答案：

我只是遇到了同样的问题，我想我找到了一个“通用”解决方案。（假设该网站使用jQuery）
希望对您有所帮助！

  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和时间。

— 炸弹炸弹
source
11
嘿! 很好的主意...尽管您甚至不需要添加额外的div ...而是运行此javascript setTimeout(function(){debugger;}, 5000);，然后显示您的元素并等待其进入调试器。然后点击Chrome Inspector中的“元素”标签，然后可以在其中查找您的元素。您也可以单击“查找元素”图标（看起来像放大镜），然后Chrome将允许您通过右键单击页面，然后选择“检查元素”来检查并找到页面上的元素。
— 布拉德·帕克斯
5
我认为您应该将此作为答案，因为此解决方案不仅比我的解决方案好，而且比这里的所有其他解决方案都好。非常好！
— frzsombor 2015年
38
  1. 右键单击“元素”选项卡内的任何位置
  2. 选择 Breakon... > subtree modifications
  3. 触发您要查看的弹出窗口，如果看到DOM中的更改，它将冻结
  4. 如果仍然看不到弹出窗口，请在Chrome的顶部顶部中心单击Step over the next function(F10)旁边Resume(F8)的按钮，直到冻结要查看的弹出窗口。
— 阿德里安·恩里克斯（Adrian Enriquez）
source
3
谢谢！我不知道这件事及其救了我
— R Claven
6

将其放在控制台选项卡中：

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

然后，在5秒钟之后单击显示弹出窗口的位置-屏幕将被冻结，并可以自定义CSS。

— 帕克·卢森佐
source
0

我的简单方法：

setTimeout(function(){ debugger; }, 3000);
— 纳达夫B
source
7
这与3年前Brad Parks发布的解决方案完全相同
— frzsombor
-2

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

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

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

— 唐文森
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.