Chrome：如何在页面树状显示后端返回的JSON数据

Chrome：如何在页面树状显示后端返回的JSON数据

问题与解决思路

在进行后端开发的时候，对于一些通过地址传递参数或无参数的控制器接口，我们会在浏览器直接进行测试。

有时候后端返回的JSON数据比较庞大，Chrome默认的页面显示JSON数据的方式就显得非常不友好，此时我们只能通过F12控制台检查数据是否符合我们的预期：

这样做，显示效果虽然很棒，但是我们还是需要在页面与控制台之间切换。

那么有没有更好的方式呢？比如直接让JSON数据在页面以树状形式展现出来。

那当然是有的，Github上已经有兄弟写好这一功能的Chrome插件了，Github项目名是JSONView-for-Chrome，插件名是JSONView。

下载与安装流程

在GitHub上搜索JSONView-for-Chrome库或直接打开链接0cmg/JSONView-for-Chrome (github.com)，下载Zip安装包：

解压压缩包后，包里有一个WebContent的文件夹，包含了插件的所有内容。

接下来通过Chrome右上角的菜单，或扩展程序按钮打开扩展程序管理界面：

最后将WebContent文件夹拖到管理界面里，插件就安装完成了。

使用简介

在安装插件后，无需重启，访问后端接口返回的JSON数据会以完全展开的树状图显示：

如果数据量大的话查看起来还是有点不方便。

但是这款插件贴心地为我们提供了快速展开全部和收起全部数据地功能，在页面右上角有展开全部的+号和收起全部的 - 号，点击 - 收起全部，然后打开想要查看的内容就可以快速查看想要查看的部分了：