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

296

J'aimerais utiliser la console développeur Chrome pour regarder les variables et les éléments DOM dans mon application, mais l'application existe à l'intérieur d'un iframe(car c'est une application OpenSocial).

La situation est donc:

<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 iframedepuis la console développeur? Si j'essaie de le faire document.getElementById("foo").something, cela ne fonctionne pas, probablement parce que iframec'est dans un domaine différent.

Je ne peux pas ouvrir le iframecontenu dans un nouvel onglet, car il iframedoit également pouvoir parler au site contenant.

debugging iframe google-chrome Bemmu
la source

Réponses:

546

Dans les outils de développement dans 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 ..., qui change en fonction du contexte de l'onglet actuel. Dans l'onglet Console, il y a une liste déroulante dans cette barre qui vous permet de sélectionner le contexte du cadre dans lequel la console fonctionnera. Sélectionnez votre cadre dans ce menu déroulant et vous vous retrouverez dans le contexte de cadre approprié. :RÉ

Chrome v59 Chrome version 59

Chrome v33 Chrome version 33

Chrome v32 et inférieur Pré-version de Chrome 32

Métagraphe
la source
1
Cela semble être cassé dans le chrome 30.0.1599.101 - toutes les tentatives d'utilisation de code, de variables, etc. sont toujours du contexte parent après avoir choisi un iframe
Kevin
3
L'interface a changé dans la version 33. Je ne sais pas où c'est maintenant.
Malcr001
3
Existe-t-il un raccourci clavier pour cela?
Vlas Bashynskyi
2
Juste pour info que cet onglet s'appelle "Execution Context Selector" car il m'a fallu un certain temps pour le découvrir :)
Felipe Sabino
1
Cela n'a pas fonctionné pour moi, probablement parce que j'utilise un iframe dans une extension. J'ai dû aller dans les extensions chrome: // et cliquer sur le lien iframe à côté du lien d'arrière-plan pour mon extension localement décompressée.
AlexMorley-Finch du
9

Actuellement, l'évaluation dans la console est effectuée dans le contexte du cadre principal de la page et elle respecte la même politique d'origine croisée 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: ce n'est plus vrai. Voir la réponse de Metagrapher .

Yury Semikhatsky
la source
3
Ce problème est toujours en suspens ... près d'un an plus tard.
Glen Little le
2

Dans mon scénario assez complexe, la réponse acceptée pour savoir comment procéder dans Chrome ne fonctionne pas pour moi. Vous voudrez peut-être essayer le débogueur Firefox à la place (une partie des outils de développement Firefox), qui affiche toutes les «sources», y compris celles qui font partie d'un iFrame

Izzy
la source
Pouvez-vous ajouter une capture d'écran? Je ne trouve pas leSources
Shayan
1

Lorsque l'iFrame pointe vers votre site comme ceci:

<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 à iFrame DOM via ce genre de chose.

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