2010-07-18 19 views
249

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

Así que la situación es:

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

¿Hay alguna manera de acceder a las cosas que suceden en que iframe desde la consola de desarrollador? Si trato de hacer d ocument.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 también necesita poder hablar con el sitio que lo contiene.

Respuesta

472

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

Chrome V59 Chrome version 59

Chrome v33 Chrome version 33

Chrome v32 & menor Chrome pre-version 32

+2

Creo que debes cambiar la respuesta correcta a esa. –

+1

Esto parece estar roto en cromo 30.0.1599.101 - cualquier intento de usar código, variables, etc. aún son del contexto principal después de elegir un iframe – Kevin

+0

Funciona para mí. Versión 33.0.1750.117 beta-m No estoy seguro si lo parchearon ... – Metagrapher

9

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

Actualización: Esto ya no es cierto. Ver Metagrapher's answer.

+0

Gracias Yury ... ¡usted sabría! – Cole

+3

He archivado un error en WebKit: https://bugs.webkit.org/show_bug.cgi?id=42554 –

+3

Este problema aún está pendiente ... casi un año después. –

1

Cuando los puntos iFrame a su sitio como este:

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

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

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

En mi escenario bastante compleja la respuesta aceptada para saber cómo hacerlo esto en Chrome d no funciona para mi Es posible que desee probar el depurador de Firefox (parte de las herramientas para desarrolladores de Firefox), que muestra todas las 'Fuentes', incluidas las que forman parte de un iFrame

Cuestiones relacionadas