Google Chrome 将 JSON AJAX 响应显示为树而不是纯文本答案

【问题标题】：Google Chrome display JSON AJAX response as tree and not as a plain textGoogle Chrome 将 JSON AJAX 响应显示为树而不是纯文本
【发布时间】：2011-04-22 18:05:23
【问题描述】：

我找不到这个问题的答案：

我的 AJAX 调用返回 JSON 数据。在 Google Chrome 开发人员工具 > 资源 > XHR 中，当我单击左侧的资源，然后在“内容”选项卡上时，我看到 JSON 字符串是一个字符串，而不是像 Firebug 和 Firebug Lite 那样的树。

如何强制 Chrome 将其显示为树。我的 PHP 文件必须有一个 Content-type 吗？？？

【问题讨论】：

@Matt McClure 下面的答案就是答案！
当字符串是单引号 ' 而不是双引号 " 时，我在获取树结构时也遇到了问题，将 ' 更改为 " 有帮助
火狐只显示json......

标签： ajax json google-chrome view tree

【解决方案1】：

要在最新版本的 Chrome 中查看树视图：

导航到开发者工具 > 网络 > 给定的响应 > 预览

【讨论】：

完全忽略了“预览”选项卡，正在查看“响应”选项卡。谢谢！
但我认为要得到这个，你需要有正确的内容类型。
是的，您需要为 chrome 指定一个有效的“application/json”内容类型，以便为您提供可折叠的下拉菜单。
这确实有点不那么直观，因为在 Headers 选项卡上，它们让我们在“原始”和“已解析”之间切换，所以人们会期望他们会提供类似的“已解析”视图响应选项卡。
我希望它实际上是 JSON 而不是树

【解决方案2】：

Google Chrome 现在支持此功能 (Developer Tools > Network > [XHR item in list] Preview)。

另外，您可以使用第三方工具来格式化 json 内容。 Here 的一个呈现树状视图，here 的另一个仅格式化文本（并进行验证）。

【讨论】：

完美答案！

【解决方案3】：

JSON 数据的正确内容类型是 application/json。我想这就是你所缺少的。

【讨论】：

不幸的是，这仍然不会强制 Chrome 将 JSON 字符串转换为树。不过谢谢！

【解决方案4】：

您可以使用 Google Chrome 扩展程序：JSONView 所有格式化的 json 结果将直接显示在浏览器上。

【讨论】：

OP 专门询问了开发工具中显示的 json 代码。
谢谢，也许这不是 OP 问题的完美答案。但我正在寻找这个。投票赞成

【解决方案5】：

我找到了答案：

您必须像这样对您的 json 进行编码：{"c":21001,"m":"p"} 但不是 {c:21001,m:"p"} 或 {'c':21001,'m':'p'}

因此，dict的key必须用双引号括起来："，然后chrome会将其预览为json而不是纯文本。

【讨论】：

这是因为第一个是有效的 JSON，而其他示例不是（尽管它们是有效的 javascript）。见simonwillison.net/2006/oct/11/json

【解决方案6】：

为了正确显示 JSON 消息，它必须具有“application/json”mime 类型并且结构正确。

可以查看结构here

【讨论】：

【解决方案7】：

Google Chrome Dev build 24.0.1312.5 的构建存在问题，导致预览面板不再显示 json 对象树，而是显示纯文本。它应该在下一个开发中修复

在此处查看更多信息：http://code.google.com/p/chromium/issues/detail?id=160733

【讨论】：

【解决方案8】：

我不认为 Chrome 开发者工具可以很好地打印 XHR 内容。看： Viewing HTML response from Ajax call through Chrome Developer tools?

【讨论】：

【解决方案9】：

我不确定 Chrome 自上次回答后是否添加了此功能，但我能够通过...查看 json 响应

在带有请求的页面上时在浏览器中打开开发者工具
提交请求
在开发者工具 - “控制台”选项卡中 - 点击资源下的“对象”树展开

...我能够将响应视为一个可读的层次结构，它显示了要求什么以及返回什么。（“网络”或“资源”选项卡都没有我能找到的任何有用的东西。）

请求愉快！

【讨论】：

【解决方案10】：

如何获取树形视图

请在下面的 GIF 中查看有关如何执行此操作的分步说明。（我在 Chrome 中记录 - 铬应该不会太不同。）

点击链接放大并关注

【讨论】：