javascript - teclado - No se puede inspeccionar un elemento con las herramientas de desarrollo de Chrome

inspector de elementos chrome

Question

Tengo un archivo html base (base.html) y dentro de él reside un iframe que usa (iframe.html). El iframe solo aparece cuando se hace clic en un elemento de menú determinado. Ambos están alojados en el mismo dominio.

En base.html incluyo un script que apunta a un servicio externo que uso. Incluir el script devuelve un objeto que vive en mi página.

<script type="text/javascript" src="externalSite.com/myID.js"></script>

En iframe.html tengo otro script que crea un menú basado en algunos de los atributos del objeto que se devuelve

<script type="text/javascript" src="my_list_builder.js"></script>

el código para my_list_builder.js se ve más o menos así:

var myList = parent.externalAPI.getItems()
var listBlock = "<div><ul>"

for (var i = 0; i < myList.length; i++) {
    listBlock += ''<li><span>''+ myList[i].Name + ''</span></li>'';
}

listBlock += ''</ul></div>''

$(''someElement'').append(listBlock);

Ahora, este código se ejecuta como se espera y agrega listBlock a la página donde lo quiero, pero cuando intento inspeccionar cualquiera de los elementos dentro del iframe en Chrome, no puedo hacerlo. El iframe es el elemento de nivel más bajo que puedo inspeccionar, pero no tiene la opción desplegable habitual. Si elimino my_list_builder.js, puedo inspeccionar los elementos en el iframe sin ningún problema.

¿Alguna idea sobre lo que podría estar causando el problema?

Answer 1

Intente utilizar la palabra clave del debugger dentro de sus scripts iframe / non-iframe. Simplemente poniendo debugger; en una línea, debería generar un punto de interrupción en las Herramientas de desarrollo de Chrome (también Firebug). Más información: https://developer.mozilla.org/en/JavaScript/Reference/Statements/debugger