如何在Chrome DevTools中检查iframe？

Question

我想将开发人员工具指向文档中的特定iframe。在Firefox中，工具栏中有button。在Chrome中，我发现了这个：

但我不知道如何在控制台以外的面板中使用此功能。在Firefox中，“如果您在列表中选择一个条目，工具箱中的所有工具 - 检查器，控制台，调试器等 - 现在将只针对那个iframe，并且基本上会表现得像页面的其余部分不存在。“

如何检查iframe中的元素，就好像页面的其余部分不存在一样？我需要看看iframe如何适合父页面，但不希望在Elements面板中看到父页面的元素（因为元素的深度）。

Answer 1

一种可能的解决方法是使用chrome://flags/#enable-site-per-process标志启用仍处于开发状态的Out-of-process iframes (OOPIF)：

• 当通过右键菜单检查iframe时，将打开一个新的devtools浮动窗口 要使用自定义上下文菜单检查类似youtube的iframe，只需再次右键单击该菜单。
• IFRAME内容不会在父督察中显示，因为它在不同的过程中。

您可能希望在单独安装的Chrome（如Canary或便携式）上执行此操作，因为该功能会破坏某些网站上的iframe（这些标记会影响整个数据文件夹中包含所有配置文件）。