有什么我可以用来巧妙地在Chrome中可视化JavaScript对象吗？

Question

我是一名经验丰富的C#编码员,但非常适合JavaScript新手,而我现在正试图获得一个纯粹的JavaScript组件,非常称职的Kendo UI DataSource,可以很好地与我的C#MVC3/4控制器交谈.*我希望能够检查某些JavaScript对象,以便我可以微调我的客户端模型映射代码,但Chrome调试控制台中的对象视图有点杂乱和低级别.

我是否有一个Chrome加载项可用于在调试脚本时可视化JavaScript对象,并且失败了,我可以使用一个很好的对象可视化器将对象可视化输出为HTML.然后,我可以切换这是否处于活动状态,为调试会话构建可视对象图,然后再次关闭可视化器以在我的客户端脚本中进行正常操作.

**这个问题是一个更广泛和不同目标的问题,只与我的另一个问题共享相同的目标,我如何接受来自我的MVC4应用程序中的Kendo UI数据源的JSON请求？但是,这个问题更具技术性,涵盖整个客户端 - 服务器往返,其中这个特定于仅可视化客户端上的JavaScript对象.

编辑: 基于下面的建议,console.log确实为运行时检查提供了足够的输出,但通常控制台是一个繁忙的地方,我宁愿在其他地方输出持久可视化,扩展对象中的所有属性,但没有'内部',例如__id和__proto,如图所示.我只想看到models两个对象的数组,每个对象只有Id和Name属性.

Answer 1

我发现将对象发送到控制台比在调试器内检查它更有用。它不那么混乱，并且您不必在代码中搜索断点。如果您只是执行console.log(object)，然后按 F12 并选择控制台，您的对象将坐在那里准备接受检查。

编辑

console.log如果你对这个属性进行操作models，结果会是这样的：

或者，如果您愿意，您可以使用类似这样的内容来吐出信息，而无需单击任何箭头：

function logModels(models) {
    for (o in models) for (p in models[o])
            console.log(p +'\t' + models[o][p]);
}

看起来像这样：

Logs您还可以通过单击栏底部的相应按钮 来过滤控制台以仅显示。