web-dev-qa-db-ja.com

Chrome開発者ツールを使用したiframeのデバッグ

Chrome開発者コンソールを使用してアプリ内の変数とDOM要素を確認したいのですが、アプリはiframe内に存在します（OpenSocialアプリであるため）。

状況は次のとおりです。

<containing site>
 <iframe id='foo' src='different domain'>
  ... my app ...
 </iframe>
</containing site>

開発者コンソールからiframeで発生していることにアクセスする方法はありますか？ document.getElementById("foo").somethingを実行しようとしても、おそらくiframeが別のドメインにあるため、動作しません。

iframeも含まれているサイトと通信できる必要があるため、iframeの内容を新しいタブで開くことができません。

debuggingiframegoogle-chrome
283
Bemmu

Chromeのデベロッパーツールには、上部にバーがあり、Execution Context Selector（h/t felipe-sabino ）と呼ばれ、要素、ネットワーク、ソース...タブのすぐ下にあります。現在のタブのコンテキストで。 [コンソール]タブでは、そのバーにドロップダウンがあり、コンソールを操作するフレームコンテキストを選択できます。このドロップダウンでフレームを選択すると、適切なフレームコンテキストが表示されます。 ：D

Chrome v59 Chrome version 59

Chrome v33 Chrome version 33

Chrome v32以下 Chrome pre-version 32

524
Metagrapher

現在、コンソールでの評価はページ内のメインフレームのコンテキストで実行され、メインフレーム自体と同じクロスオリジンポリシーに準拠しています。これは、メインフレームがアクセスできない限り、iframeの要素にアクセスできないことを意味します。ただし、スクリプトパネルを使用してブレークポイントを設定し、コードをデバッグできます。

更新：これはもはや真実ではありません。 Metagrapher's answer を参照してください。

9
Yury Semikhatsky

私のかなり複雑なシナリオでは、Chromeでこれを行う方法について受け入れられている答えは私には機能しません。代わりにFirefoxデバッガー（Firefox開発者ツールの一部）を試してください。iFrameの一部を含むすべての「ソース」が表示されます。

2
Izzy

IFrameが次のようにサイトを指す場合：

<html>
  <head>
    <script type="text/javascript" src="/jquery.js"></script>
  </head>
  <body>
    <iframe id="my_frame" src="/wherev"></iframe>
  </body>
</html>

このようなことでiFrame DOMにアクセスできます。

var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]);
iframeBody.append($("<h1/>").html("Hello world!"));
1
Dave Aaron Smith