[解決済み] 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 は、含有するサイトとも対話できる必要があります。

解決方法は？

Chromeのデベロッパーツールには、上部にある Execution Context Selector (h/t フェリペ・サビーノ ) の下に、Elements、Network、Sources...といったタブがあり、現在のタブのコンテキストによって変化します。 コンソールタブのバーには、コンソールが動作するフレームのコンテキストを選択するためのドロップダウンが表示されます。 このドロップダウンでフレームを選択すると、適切なフレームコンテキストが表示されます :D

クローム v59

クローム v33

Chrome v32 & 以下