如何在 Chrome DevTools 中检查 iframe？

Question

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

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

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

Answer 1

一种可能的解决方法是使用标志启用仍在开发的进程外 iframe (OOPIF)chrome://flags/#enable-site-per-process：

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

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