Depuración de iframes con herramientas para desarrolladores de Chrome

296

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

Entonces 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 iframedesde la consola del desarrollador? Si trato de hacerlo document.getElementById("foo").something, no funciona, probablemente porque iframeestá en un dominio diferente.

No puedo abrir el iframecontenido en una nueva pestaña, porque también iframenecesita poder hablar con el sitio que lo contiene.

debugging iframe google-chrome Bemmu
fuente

Respuestas:

546

En las Herramientas de desarrollador en Chrome, hay una barra en la parte superior, llamada Execution Context Selector(h / t felipe-sabino ), justo debajo de las pestañas Elementos, Red, Fuentes ..., que cambia según el 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 operará la Consola. Seleccione su marco en este menú desplegable y se encontrará en el contexto de marco apropiado. :RE

Chrome v59 Chrome versión 59

Chrome v33 Chrome versión 33

Chrome v32 y versiones inferiores Chrome pre-versión 32

Metagrafo
fuente
1
Esto parece estar roto en Chrome 30.0.1599.101 - cualquier intento de usar código, variables, etc. aún es del contexto principal después de elegir un iframe
Kevin
3
La interfaz ha cambiado en la versión 33. No estoy seguro de dónde está ahora.
Malcr001
3
¿Hay un atajo de teclado para esto?
Vlas Bashynskyi
2
Solo un FYI que esta pestaña se llama "Selector de contexto de ejecución", ya que me tomó un tiempo descubrirlo :)
Felipe Sabino
1
Esto no funcionó para mí, probablemente porque estoy usando un iframe en una extensión. Tuve que ir a chrome: // extensiones y hacer clic en el enlace de iframe junto al enlace de fondo para mi extensión desempaquetada localmente.
AlexMorley-Finch
9

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 política de origen cruzado que el marco principal en sí. Esto significa que no puede acceder a elementos en el iframe a menos que el marco principal sí. Sin embargo, aún puede establecer puntos de interrupción y depurar su código utilizando el panel Scripts.

Actualización: esto ya no es cierto. Ver la respuesta del metagrafo .

Yury Semikhatsky
fuente
3
Este problema sigue pendiente ... casi un año después.
Glen Little
2

En mi escenario bastante complejo, la respuesta aceptada sobre 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

Izzy
fuente
¿Puedes agregar una captura de pantalla? No puedo encontrar elSources
Shayan
1

Cuando el iFrame apunta a su sitio así:

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

Puede 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!"));
Dave Aaron Smith
fuente