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

CSS

ASamJim

2020-03-20

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

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

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

第2469篇《在chrome调试器/ DevTools面板中冻结屏幕以进行弹出检查？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共7个回答
猴子村村 2020.03.20

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

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

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

NearL 2020.03.20

我的简单方法：

setTimeout(function(){ debugger; }, 3000);
Pro神奇 2020.03.20

我发现这在Chrome中非常有效。

右键单击要检查的元素，然后单击“强制元素状态”>“悬停”。屏幕截图已附上。

力元素状态

老丝阿飞 2020.03.20
  1. 右键单击“元素”选项卡内的任何位置
  2. 选择 Breakon... > subtree modifications
  3. 触发您要查看的弹出窗口，如果看到DOM中的更改，它将冻结
  4. 如果仍然看不到弹出窗口，请在Chrome的顶部顶部中心单击Step over the next function(F10)旁边Resume(F8)的按钮，直到冻结要查看的弹出窗口。
凯卡卡西凯 2020.03.20

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

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

原始答案：

I just had the same problem, and I think I found an "universal" solution. (assuming the site uses jQuery)
Hope it helps someone!

  1. Go to elements tab in inspector
  2. Right click <body> and click "Edit as HTML"
  3. Add the following element after <body> then press Ctrl+Enter:
    <div id="debugFreeze" data-rand="0"></div>
  4. Right click this new element, and select "Break on..." -> "Attributes modifications"
  5. Now go to Console view and run the following command:
    setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
  6. Now go back to the browser window and you have 5 seconds to find your element and click/hover/focus/etc it, before the breakpoint will be hit and the browser will "freeze".
  7. Now you can inspect your clicked/hovered/focused/etc element in peace.

当然，您可以根据需要修改javascript和时间。

TomLEY 2020.03.20

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

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

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

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

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

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

GoldenGG 2020.03.20

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

  1. 浏览到所需页面
  2. 打开开发者控制台- F12在Windows / Linux上或在MacOS上option+ ⌘+J
  3. 选择SourcesChrome检查器中的标签
  4. 在Web浏览器窗口中，将鼠标悬停在所需元素上以启动弹出窗口
  5. 命中F8在Windows / Linux操作系统（或者fn+ F8在MacOS），而酥料饼被展示。如果您在实际页面上的任何位置单击，F8将不起作用。您的最终点击必须位于检查器中的某处，例如“源”选项卡
  6. 转到Elements检查器中的选项卡
  7. 查找您的弹出窗口（它将嵌套在触发元素的HTML中）
  8. 玩修改CSS很开心

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android