使用Chrome Dev Tools无法检查元素

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中的元素。 有什么想法可能导致此问题？

- megsa

---

这在jsfiddle.net上经常发生。如果你按shift-enter或者"run"工具栏按钮来更新预览窗口，那么直到你点击"save"/"update"之前，检查器在预览窗口中将无法使用。这肯定与iframe中动态生成的内容有关。很想知道为什么，或者是否存在Chromium问题需要关注。 - Dagg Nabbit

我找到了一个奇怪的临时解决方法，虽然我对为什么它首先出现问题的原因仍一无所知。这个解决方法也不是一致的，但我想我会把它列出来以防其他人遇到类似的问题。如果我在my_list_builder.js中放置断点并逐步执行它们，然后在iframe完成加载后，我就能够检查iframe中的元素。如果我删除断点，在my_list_builder.js中进行任何更改并保存后重新加载，则问题会再次出现。不确定为什么断点有帮助，但我很高兴它们能够发挥作用！ - megsa

我认为你应该在Chrome错误跟踪器上将此记录为错误，而不是在SO上提问。 - Daan

Answer 1

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

- blong