Depuração de iframes com ferramentas de desenvolvedor do Chrome

Gostaria de usar o console do desenvolvedor do Google Chrome para ver variables ​​e elementos DOM no meu aplicativo, mas o aplicativo existe dentro de um iframe (já que é um aplicativo OpenSocial).

Então a situação é:

   ... my app ...   

Existe alguma maneira de acessar as coisas que acontecem nesse iframe no console do desenvolvedor? Se eu tentar fazer document.getElementById("foo").something , não funciona, provavelmente porque o iframe está em um domínio diferente.

Não consigo abrir o conteúdo do iframe em uma nova guia, porque o iframe precisa ser capaz de falar com o site que o contém.

Nas Ferramentas para Desenvolvedores no Chrome, há uma barra na parte superior, chamada Execution Context Selector (h / t felipe-sabino ), logo abaixo das guias Elementos, Rede, Origens …, que muda dependendo do contexto do guia atual. Quando na guia Console, há uma lista suspensa nessa barra que permite selecionar o contexto do quadro no qual o Console irá operar. Selecione seu quadro neste menu suspenso e você se encontrará no contexto de quadro apropriado. : D

Chrome v59 Versão do Chrome 59

Chrome v33 Versão do Chrome 33

Chrome v32 e inferior Pré-versão do Chrome 32

Atualmente, a avaliação no console é realizada no contexto do quadro principal da página e segue a mesma política de origem cruzada que o próprio quadro principal. Isso significa que você não pode acessar elementos no iframe, a menos que o quadro principal possa. Você ainda pode definir pontos de interrupção e depurar seu código usando o painel Scripts.

Atualização: isso não é mais verdade. Veja a resposta do Metagrapher .

Em meu cenário bastante complexo, a resposta aceita de como fazer isso no Chrome não funciona para mim. Você pode querer experimentar o depurador do Firefox (parte das ferramentas de desenvolvimento do Firefox), que mostra todas as ‘Fontes’, incluindo aquelas que fazem parte de um iFrame.

Quando o iFrame aponta para o seu site assim:

         

Você pode acessar o iFrame DOM através desse tipo de coisa.

 var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]); iframeBody.append($("

").html("Hello world!"));