如何在Chrome DevTools中使用iframe？

Question

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

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

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

Answer 1

一个可能的解决办法是让仍然处于发展Out-of-process iframes (OOPIF)使用chrome://flags/#enable-site-per-process标志：

• 新devtools浮动窗口时，一个iframe通过右键菜单检查将打开。
  要检查带有自定义上下文菜单的类似YouTube的iframe，只需再次在该菜单上单击鼠标右键即可。
• IFRAME内容将不会显示在父检查器中，因为它处于不同的过程中。

您可能需要因为该功能打破一些网站上的I帧（这些标志会影响与里面的所有配置文件的整个数据文件夹）做介绍Chrome就像金丝雀或便携式单独安装。