Unable to Inspect an Element using Chrome Dev Tools

Question

I have a base html file (base.html) and inside of it resides an iframe that uses (iframe.html). The iframe only shows up when a certain menu item is clicked. They are both hosted on the same domain.

In base.html I'm including a script that points to an external service that I use. Including the 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 builds a menu based on some of the attributes of the object that is returned

<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 the listBlock to the page where I want it, but when I try to inspect any of the elements within the iframe in Chrome I am unable to do so. The iframe is the lowest level element I can inspect, but it doesn't have the usual dropdown option. If I remove the my_list_builder.js I'm able to inspect the elements in the iframe without any trouble.

Any ideas on what might be causing the issue?

Answer 1

Try using the debugger keyword inside your iframe/non-iframe scripts. Simply putting debugger; on a line, should programmatically cause a breakpoint in the Chrome Developer Tools (also Firebug). More info: https://developer.mozilla.org/en/JavaScript/Reference/Statements/debugger