Depurando iframes com ferramentas de desenvolvedor do Chrome

296

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

Então a situação é:

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

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

Não consigo abrir o iframeconteúdo em uma nova guia, porque também é iframenecessário conversar com o site que o contém.

debugging iframe google-chrome Bemmu
fonte

Respostas:

546

Nas Ferramentas do desenvolvedor no Chrome, há uma barra na parte superior, chamada Execution Context Selector(h / t felipe-sabino ), logo abaixo das guias Elementos, Rede, Fontes ..., que muda dependendo do contexto da guia atual. Quando, na guia Console, há uma lista suspensa nessa barra que permite selecionar o contexto de 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 Chrome versão 59

Chrome v33 Chrome versão 33

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

Metagrapher
fonte
1
Isto parece estar quebrado no Chrome 30.0.1599.101 - Qualquer tentativa de usar o código, variáveis, etc ainda são a partir do contexto pai depois de escolher um iframe
Kevin
3
A interface foi alterada na versão 33. Não sei ao certo onde é isso agora.
precisa saber é o seguinte
3
Existe um atalho de teclado para isso?
Vlas Bashynskyi
2
Apenas um FYI que este guia é chamado de "Selector contexto de execução" como ele me levou algum tempo para descobrir :)
Felipe Sabino
1
Isso não funcionou para mim, provavelmente porque estou usando um iframe em uma extensão. Eu tive que entrar no chrome: // extensions e clicar no link iframe ao lado do link em segundo plano da minha extensão descompactada localmente.
AlexMorley-Finch
9

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 metagrafista .

Yury Semikhatsky
fonte
3
Esse problema ainda está pendente ... quase um ano depois.
Glen Little
2

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

Izzy
fonte
Você pode adicionar uma captura de tela? Não consigo encontrar oSources
Shayan
1

Quando o iFrame aponta para o seu site assim:

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

Você pode acessar o DOM do iFrame por esse tipo de coisa.

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