Unable to validate item using Chrome Dev tools

Question

I have a basic html file (base.html) and inside it is an iframe that uses (iframe.html). IFrame appears only when you click on a specific menu item. They are both located in the same domain.

In base.html, I include a script that points to the external service that I am using. An inclusion script returns an object that lives on my page.

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

In iframe.html, I have another script that creates a menu based on some attributes of the returned object

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

The code for my_list_builder.js looks something like this:

 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); 

Now this code executes as expected and adds a listBlock to the page where I want it, but when I try to check an element in an iframe in Chrome, I cannot do this. An IFrame is the lowest level element that I can check, but it does not have the usual dropdown option. If I delete my_list_builder.js, I can easily check the elements in the iframe.

Any ideas on what might cause the problem?

Answer 1

Try using the debugger keyword inside iframe / non-iframe scripts. Just putting a debugger; to a line, programmatically call a breakpoint in the Chrome developer tools (also Firebug). Additional information: https://developer.mozilla.org/en/JavaScript/Reference/Statements/debugger