Depuración de iframes con Chrome herramientas para desarrolladores

Me gustaría utilizar la consola de desarrolladores de Chrome para ver las variables y elementos DOM en mi aplicación, pero la aplicación existe dentro de un iframe (ya que es una aplicación OpenSocial).

Así que la situación es: 

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

¿Hay alguna forma de acceder a las cosas que suceden en ese iframe desde la consola del desarrollador? Si trato de hacer document.getElementById("foo").something, no funciona, probablemente porque el iframe está en un dominio diferente.

No puedo abrir el contenido de iframe en una nueva pestaña, porque el iframe necesita poder hablar al sitio que contiene también.

Author: Bemmu, 2010-07-18
Source

4 answers

En las Herramientas para desarrolladores en Chrome, hay una barra en la parte superior, llamada Execution Context Selector (h/t felipe-sabino), justo debajo de los Elementos, Red, Fuentes... pestañas, que cambian dependiendo del contexto de la pestaña actual. Cuando en la pestaña Consola hay un menú desplegable en esa barra que le permite seleccionar el contexto del marco en el que funcionará la Consola. Seleccione su marco en este menú desplegable y se encontrará en el contexto de marco apropiado. : D

Cromo v59 Chrome versión 59

Chrome v33 Chrome versión 33

Chrome v32 & lower Chrome pre-versión 32

 495
Author: Metagrapher,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-29 17:39:57

Actualmente, la evaluación en la consola se realiza en el contexto del marco principal de la página y se adhiere a la misma directiva de origen cruzado que el propio marco principal. Esto significa que no puede acceder a los elementos del iframe a menos que el marco principal pueda hacerlo. Sin embargo, puede establecer puntos de interrupción y depurar su código utilizando el panel Scripts.

Actualizar: Esto ya no es cierto. Ver Respuesta de Metagrapher.

 9
Author: Yury Semikhatsky,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:18:01

En mi escenario bastante complejo la respuesta aceptada de cómo hacer esto en Chrome no funciona para mí. Es posible que desee probar el depurador de Firefox en su lugar (parte de las herramientas para desarrolladores de Firefox), que muestra todas las 'Fuentes', incluidas las que forman parte de un iFrame

 2
Author: Izzy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-05 01:13:08

Cuando el iFrame apunta a tu sitio de esta manera:

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

Puedes acceder a iFrame DOM a través de este tipo de cosas.

var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]);
iframeBody.append($("<h1/>").html("Hello world!"));
 1
Author: Dave Aaron Smith,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-20 16:24:21