如何在 Chrome 浏览器中美化 XHR（Ajax 调用）的响应体？

【问题标题】：How to beautify respond body of XHR (Ajax call) in Chrome browser?如何在 Chrome 浏览器中美化 XHR（Ajax 调用）的响应体？
【发布时间】：2015-04-02 10:06:54
【问题描述】：

从下面的截屏中可以看出，响应主体是一个缩小的 JSON 对象。有没有人知道如何在谷歌 Chrome 浏览器中美化它？

【问题讨论】：

标签： ajax google-chrome google-chrome-extension xmlhttprequest google-chrome-devtools

【解决方案1】：

我认为没有办法*使用现有的 DevTools 功能。

应该在扩展中可行（向开发工具添加另一个面板），请参阅chrome.devtools.network 和一般"Extending DevTools" guide。

* 请参阅ankur-singhal's answer 了解例外情况

【讨论】：

【解决方案2】：

我找到了一个名为JsonView.. 的扩展名。

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc/related

如果 JSON 可以使用 GET 方法，它是很棒的。但不确定如何使用 POST 方法访问。..

【讨论】：

【解决方案3】：

您需要为 chrome 指定有效的 "application/json" content-type 才能为您提供可折叠的下拉菜单

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

Navigate to Developer Tools > Network > the given response > Preview

【讨论】：