如何在Chrome DevTools中检查iframes？

Question

10

我希望将开发者工具指向文档中的特定iframe。在Firefox浏览器中，工具栏有一个按钮。在Chrome浏览器中，我找到了这个：

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

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

- user159

2个回答

0

在 Chrome 调试器中，在 HTML 代码中 iframe 对象的结尾之前，即 </iframe> 之前应该有一个小的水平三点按钮。如果您点击该按钮，将会弹出一个 #document，其中包含 iframe 中代码的可检查元素。

- kawthuldrok

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- wOxxOm · Accepted Answer

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

当通过右键单击菜单检查iframe时，将打开一个新的devtools浮动窗口。
要检查具有自定义上下文菜单的类似于youtube的iframe，请再次右键单击该菜单。
由于它位于不同的进程中，IFRAME内容不会显示在父级检查器中。

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