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

Question

我是一个经验丰富的 C# 编码员，但是 JavaScript 新手，我现在正在尝试获得一个纯 JavaScript 组件，非常有能力的 Kendo UI 数据源，以便与我的 C# MVC3/4 Controller 很好地交谈。*我想要能够检查某些 JavaScript 对象，以便微调客户端模型映射代码，但 Chrome 调试控制台中的对象 View 有点困惑且级别较低。

是否有一个 Chrome 加载项可用于在调试脚本时可视化 JavaScript 对象，如果没有，我可以使用一个很好的对象可视化工具将对象可视化输出为 HTML。然后我可以切换它是否处于事件状态，为调试 session 构建一个可视对象图，然后再次关闭可视化工具以在我的客户端脚本中进行正常操作。

** 这个问题是一个范围更广、目标不同的问题，它与我的另一个问题 How can I accept JSON requests from a Kendo UI data source in my MVC4 application? 的目标相同。但是，该问题更具体地涉及技术，涵盖了整个客户端-服务器往返过程，其中这个问题仅针对在客户端可视化 JavaScript 对象。

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

Answer 1

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

编辑

如果您对 models 属性执行 console.log，输出结果如下:

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

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

看起来像这样:

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