在IE开发者工具控制台中显示对象

Question

我正在使用Firefox，Chrome和Internet Explorer调试我的Web应用程序。对于后者，我正在使用开发人员工具来调试我的脚本。

我遇到的问题是，当我在控制台窗口中写入一些表达式并且应该返回一个对象时，我所看到的只是一个简单的{...}，这并不真正有帮助。

是否有可能使它与Firebug或Chrome控制台类似，实际上显示对象内容。在这方面，Chrome是最好的，因为您可以直接遍历整个对象，就像在Visual Studio中一样。

无论如何。是否有可能使IE开发人员工具控制台显示对象属性及其值？

- Robert Koritnik

---

我查看感兴趣对象的属性的唯一方法是在适当的行设置断点并使用“监视”窗口... - Linus Kleen

@goreSplatter：如果你想检查代码中的某些内容，那很好。但是我在控制台中运行任意代码，这些代码实际上并不是我的脚本的一部分...就像这么简单的一行代码：window.JSON.parse('{"d":"2010-01-01T12:34:56Z","i":123}');，而我得到的结果只是 {...}，这真的非常有帮助。谢谢微软。 - Robert Koritnik

Answer 1

我使用内置的JSON对象。

JSON.stringify(my_object)

- Dave Aaron Smith

---

假设这是可用的（对我来说是可用的），这是一个更好的解决方案 :-) - Topher Fangio

这并不显示所有属性。如果您有一个复杂的对象，它似乎只显示静态属性。也就是说，如果一个属性是一个函数，在这里似乎会被忽略掉。 - Carnix

Answer 2

要在IE中探索对象的属性和值，您首先必须：

• 设置断点（或启用脚本调试）
• 触发断点（或遇到错误）

局部选项卡在触发断点时会提供本地可用的属性和详细信息 将对象名称添加到观察选项卡中，您可以查看命名对象的属性和详细信息

微软的“朋友们”有介绍IE开发人员工具的视频。在3:03时他们提到了这种“简单”的探索对象的方法。

- RJThompson3rd

---

如果你正在调试页面脚本，那么没问题... 但如果你在控制台中运行任意代码并想直接调查结果，那么你无法设置任何断点。不幸的是，微软对有用的开发工具有一个非常不切实际的看法... - Robert Koritnik

Answer 3

尝试使用 console.dir(/*对象*/);。这样，在ie浏览器中，可以获得更多细节信息。

- David Herse

---

这是个玩笑吗？dir不被支持。但我可以使用log，它在IE8中显示LOG: [object Object]而不是{...}，这更加有用，我承认。:) 但事实是我不知道IE9甚至IE10显示什么，或者它们对dir的支持情况。我怀疑它们可能会更聪明，否则所有这些只证明了一件事：微软不使用IE来调试Web应用程序。 - Robert Koritnik

不是开玩笑。我应该澄清这仅支持ie9及以上版本。您也可以在旧浏览器模式下运行ie9，以了解可能遇到的问题。这并不能替代在旧浏览器中进行测试，但使用IE9更好的开发人员工具可能更容易发现错误。 - David Herse

虽然在IE 9中可以工作，但它会打印出所有对象结构，而不像Chrome一样显示可展开的树形结构，例如使用console.log(object)。 - Jesse Glick

Answer 4

如果Prototype API是一种选择，您可以像这样调试您的对象：

var obj = window.JSON.parse('{"d":"2010-01-01T12:34:56Z","i":123}');
alert($H(obj).inspect());

除此之外，我不知道其他方式可以不获取非常有用的{...}。

- Linus Kleen

---

对于类似jQuery功能，我编写了这个简短的代码：$.extend({inspect:function(obj,n){n=n||"this";for(var p in obj){if($.isPlainObject(obj[p])){$.inspect(obj[p],n+"."+p);return;}console.log(n+"."+p.toString()+" = "+obj[p]);}}}); 它可以在任何浏览器（包括Firebug）中轻松使用，并且可以通过 $.inspect(someObject) 进行调用。请注意，我会修改语言以使其更加通俗易懂，但不会改变原始意思。 - Robert Koritnik

@goreSplatter：它不能遍历数组。但是可以扩展以包括它们。 - Robert Koritnik

@goreSplatter：这个更长的一行代码也可以遍历数组：$.extend({inspect:function(obj,n){n=n||"this";if($.isArray(obj)){for(var x=0;x<obj.length;x++){$.inspect(obj[x],n+"["+x+"]");}return;}if($.isPlainObject(obj)){for(var p in obj){$.inspect(obj[p],n+"."+p);}return;}console.log(n+" = "+obj.toString());}}); 请自行决定是否使用。;) - Robert Koritnik

我已经为这个问题奋斗了很长时间，想着去谷歌一下看看能找到什么。我尝试了一行长的代码，在IE10中以IE8+IE8标准模式（我知道，真恶心）调用$。对我的jQuery对象进行检查，结果在控制台中呈现“this = [object Object]”。 - Carnix

@Carnix [object Object] 是IE浏览器在打印字符串、数字或数组以外的对象时使用的 toString() 方法。 - Linus Kleen

Answer 5

在控制台脚本窗口中尝试以下内容：

for (var a in object) {
    console.log("object["+a+"]="+object[a])
}

例如，

for (var a in document.head){
    console.log("document.head["+a+"]="+document.head[a])
}

- Greg S

---

这对于单层级确实有效，但它不会遍历整个对象...你有看到我在被接受的答案中的评论吗？它完全遍历了对象，对吧？ - Robert Koritnik

Answer 6

这里有一个非常奇特的方法来实现它...运行对象通过 JSON.stringify 并显示结果。

- Michael Cox

Answer 7

将对象添加到监视窗口，您可以从监视面板完全查看和分析它。

- Prateek Batla

Answer 8

对我来说有效的方法，也许这只是他们最近添加的功能，但在打开控制台日志后，请清除日志但保持控制台打开，然后刷新页面。随着页面的加载，您应该能够浏览对象。我不确定为什么需要以这种方式完成，但它似乎有效。

- Deathstalker

---

我希望在2017年，你不再使用IE8了，那只有基本的开发工具。现在的工具已经大大地进化了，并且能够做到它们的目的。 - Robert Koritnik