debugging - para - desactivar debugger chrome
Depuración de iframes con herramientas de desarrollo de Chrome (4)
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>
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!"));
Me gustaría usar la consola de desarrollo de Chrome para ver las variables y los 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 intento hacer document.getElementById("foo").something , no funciona, probablemente porque el iframe está en un dominio diferente.
No puedo abrir el contenido del iframe en una nueva pestaña, porque el iframe necesita poder hablar con el sitio que lo contiene.
En las Herramientas de desarrollo 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 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 adecuado. :RE
Cromo v59
Cromo v33
Chrome v32 y más bajo
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 (parte de las herramientas de desarrollo de Firefox), que muestra todas las "Fuentes", incluidas las que forman parte de un iFrame.
La evaluación actual en la consola se realiza en el contexto del marco principal en la página y se adhiere a la misma política de origen cruzado que el propio marco principal. Esto significa que no puede acceder a los elementos en el iframe a menos que el marco principal pueda. Sin embargo, aún puede establecer puntos de interrupción y depurar su código mediante el panel Scripts.
Actualización: Esto ya no es cierto. Ver la respuesta de Metagrapher .