Chrome DevToolsでiframeを使用するにはどうすればよいですか？

Question

開発ツールをドキュメント内の特定のiframeに指定したいと思います。 Firefoxでは、ツールバーにbuttonがあります。 Chromeで、私はこれが見つかりました：

をしかし、私はコンソール以外のパネルでこの機能を使用する方法がわかりません。 Firefoxでは、「リスト内の項目を選択すると、インスペクタ、コンソール、デバッガなどのツールボックス内のすべてのツールがそのiframeだけを対象とし、本質的にページの残りの部分のように動作します存在しない。"

iframe内の要素をページの残りの部分が存在しないかのように検査するにはどうすればよいですか？ iframeが親ページにどのように収まっているかを確認する必要がありますが、要素の深さのために、親ページの要素を「要素」パネルで表示する必要はありません。

Answer 1

一つの可能​​な回避策は、まだ開発中のOut-of-process iframes (OOPIF)使用chrome://flags/#enable-site-per-processフラグを有効にするには、次のとおりです。

• 新しいデベロッパーツールのiframeが右クリックメニューから検査されたときに表示されたウィンドウを浮動します。
  カスタムコンテキストメニューでyoutubeのようなiframeを調べるには、そのメニューを再度右クリックします。
• IFRAMEの内容は、別のプロセスにあるため、親のインスペクタに表示されません。

一部のサイトで機能がiframeを壊すため（これらのフラグは、すべてのプロファイルが内部にあるデータフォルダ全体に影響するため）、CanaryやポータブルなどのChromeの別のインストールで行うことができます。