web-dev-qa-db-fra.com

Débogage d'iframes avec les outils de développement Chrome

J'aimerais utiliser la console de développement Chrome pour examiner les variables et les éléments DOM de mon application, mais celle-ci existe dans un iframe (puisqu'il s'agit d'une application OpenSocial).

Donc, la situation est la suivante:

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

Existe-t-il un moyen d'accéder à ce qui se passe dans cette iframe à partir de la console du développeur? Si j'essaie de faire document.getElementById("foo").something, cela ne fonctionne pas, probablement parce que le iframe se trouve dans un domaine différent.

Je ne peux pas ouvrir le contenu de iframe dans un nouvel onglet, car le iframe doit également pouvoir communiquer avec le site qui le contient.

debuggingiframegoogle-chrome
284
Bemmu

Dans les outils de développement de Chrome, il y a une barre en haut, appelée Execution Context Selector (h/t felipe-sabino ), juste sous les onglets Éléments, Réseau, Sources ... , cela change en fonction du contexte de l'onglet en cours. Une fois dans l’onglet Console, une barre déroulante vous permet de sélectionner le contexte du cadre dans lequel la console fonctionnera. Sélectionnez votre cadre dans cette liste déroulante et vous vous retrouverez dans le contexte de cadre approprié. :RÉ

Chrome v59  Chrome version 59

Chrome v33  Chrome version 33

Chrome v32 & inférieur  Chrome pre-version 32

527
Metagrapher

Actuellement, l'évaluation dans la console est effectuée dans le contexte du cadre principal de la page et elle adhère à la même stratégie cross-Origin que le cadre principal lui-même. Cela signifie que vous ne pouvez pas accéder aux éléments de l'iframe à moins que le cadre principal ne le puisse. Vous pouvez toujours définir des points d'arrêt et déboguer votre code à l'aide du panneau Scripts.

Mise à jour: Ceci n'est plus vrai. Voir réponse du métagraphe .

9
Yury Semikhatsky

Dans mon scénario assez complexe, la réponse acceptée pour savoir comment procéder dans Chrome ne fonctionne pas pour moi. Vous pouvez également essayer le débogueur Firefox (faisant partie des outils de développement de Firefox), qui affiche toutes les "sources", y compris celles faisant partie d’un iFrame.

2
Izzy

Lorsque l'iFrame pointe vers votre site, procédez comme suit:

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

Vous pouvez accéder au DOM iFrame via ce genre de chose.

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