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

J’aimerais utiliser la console du développeur Chrome pour examiner les variables et les éléments DOM de mon application, mais l’application existe dans un iframe (car c’est une application OpenSocial).

Donc, la situation est la suivante:

   ... my app ...   

Existe-t-il un moyen d’accéder à ce qui se passe dans cet iframe partir de la console du développeur? Si j’essaie de faire document.getElementById("foo").something , ça ne marche pas, probablement parce que l’ iframe trouve dans un autre domaine.

Je ne peux pas ouvrir le contenu d’ iframe dans un nouvel onglet, car l’ iframe doit également pouvoir communiquer avec le site contenant.

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 tabs Elements, Network, Sources …, qui change en fonction du contexte du onglet actuel. Dans l’onglet Console, une barre de sélection vous permet de sélectionner le contexte dans lequel la console fonctionnera. Sélectionnez votre cadre dans cette liste déroulante et vous vous retrouverez dans le contexte approprié. :RÉ

Chrome v59 Version chrome 59

Chrome v33 Version chrome 33

Chrome v32 et inférieur Chrome pré-version 32

Actuellement, l’évaluation dans la console est effectuée dans le contexte de l’image principale de la page et respecte la même politique d’origine croisée que la trame principale elle-même. Cela signifie que vous ne pouvez pas accéder aux éléments dans l’iframe à moins que le cadre principal puisse le faire. 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 métagraphe .

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

Lorsque l’iFrame pointe vers votre site comme ceci:

         

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

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

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