google-chrome-extension - 有什么东西可以用来在 Chrome 中巧妙地可视化 JavaScript 对象吗？

Question

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

是否有一个 Chrome 插件可用于在调试脚本时可视化 JavaScript 对象，如果失败了，我可以使用一个不错的对象可视化器将对象可视化输出为 HTML。然后我可以切换它是否处于活动状态，为调试会话构建可视对象图，然后再次关闭可视化器以在我的客户端脚本中进行正常操作。

** 这个问题是一个更广泛且目标不同的问题，它与我的另一个问题的目标相同，如何在我的 MVC4 应用程序中接受来自 Kendo UI 数据源的 JSON 请求？然而，这个问题更针对技术，涵盖了整个客户端-服务器往返，其中这个问题只针对在客户端上可视化 JavaScript 对象。

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

Answer 1

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

编辑

如果你console.log在models属性上做 a ，它会像这样出现：

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

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

看起来像这样：

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