无法使用Chrome开发工具检查元素

Question

我有一个基本的html文件(base.html),里面有一个使用(iframe.html)的iframe.iframe仅在单击某个菜单项时显示.它们都托管在同一个域中.

在base.html中,我包含一个指向我使用的外部服务的脚本.包括脚本会返回一个存在于我页面上的对象.

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

在iframe.html中,我有另一个脚本,它根据返回的对象的某些属性构建菜单

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

my_list_builder.js的代码如下所示:

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

现在,此代码按预期执行并将listBlock添加到我想要的页面,但是当我尝试检查Chrome中iframe中的任何元素时,我无法执行此操作.iframe是我可以检查的最低级别元素,但它没有通常的下拉选项.如果我删除了my_list_builder.js,我可以毫无困难地检查iframe中的元素.

关于可能导致问题的任何想法？

Answer 1

尝试debugger在 iframe/非 iframe 脚本中使用关键字。只需放置debugger;一行，就应该以编程方式在 Chrome 开发人员工具（也称为 Firebug）中引起断点。更多信息：https ://developer.mozilla.org/en/JavaScript/Reference/Statements/debugger