经常使用Swagger的朋友应该明白，Swagger对JSON的支持实在是太不友好了！最近发现了两款好看的JSON可视化工具，可以优雅的展示JSON数据，提高开发效率。我向所有人推荐它们！SpringBoot实战电商项目商城（50k+star）地址：https://github.com/macrozheng/mall下面说说Swagger。先说说Swagger对JSON的支持不友好的地方。为什么我们需要JSON可视化工具！我们在使用Swagger提交POST请求，输入JSON请求参数时，不支持JSON格式校验或者格式化，使用起来非常不方便；当我们使用Swagger获取长JSON数据时，Swagger不支持折叠数据，有时我们只能将数据复制到其他工具上查看，比如找一个在线的JSON解析工具。针对以上两个Swagger的痛点，JsonHero和JsonVisio都可以解决，它们都是极具特色的JSON可视化工具。JsonHero简介JsonHero是一个开源的JSON可视化工具。它目前在Github上有2.9K+Stars。通过JsonHero，你可以非常方便的查看JSON数据。它支持列视图、树视图和编辑视图。总有一款适合你！安装JsonHero是一个前端项目，下载安装还是很简单的，先下载它的安装包，下载地址：https://github.com/jsonhero-i...下载完成后解压到指定目录即可在根目录下创建.env文件，文件内容如下；SESSION_SECRET=abc123然后使用如下命令安装依赖并启动，使用前需要安装node.js环境；npminstallnpmstart启动成功后，控制台会显示如下信息；然后就可以使用JsonHero来可视化JSON数据了，访问地址：http://localhost:8787使用JsonHero很简单，直接复制JSON数据或者获取JSON的URL到输入框，然后点击开始按钮；我们可以从Swagger中把长长的JSON数据复制过来，我们可以通过列视图逐层查看JSON数据；当我们选择一个JSON对象时，右侧会直接显示该JSON对象的数据；通过JSON视图，我们可以查看格式化后的JSON数据，当同时选中一个JSON对象时，右侧会直接显示该JSON对象的数据；可以通过树形视图对JSON数据进行折叠，查看数据更方便；我们也可以使用搜索功能，对JSON数据进行全局搜索；JsonHero还支持预览不同格式的数据，比如图片、时间、日期、URL等数据。JsonVisio简介JsonVisio是一个简单易用的JSON可视化工具。它目前在Github上有4.1K+Stars。可以支持JSON格式化、编辑和校验，可以根据JSON生成树状图。安装首先我们需要下载JsonVisio安装包，注意下载的是1.6.0版本，下载地址：https://github.com/AykutSarac...下载成功后，解压到指定目录，并然后使用npm命令安装并启动；npminstallnpmrundev启动成功后，控制台会输出如下信息；然后就可以访问JsonVisio页面，点击StartGenerating开始使用JSON编辑器，访问地址：http://localhost:3000使用我们需要在Swagger中编辑的请求参数进行复制，JsonVisio可以支持如下操作编辑、格式化、清除和保存；当我们的JSON格式错误时，会有提示；它还可以支持生成基于JSON格式的树状图。小结通过使用以上两个JSON可视化工具，即使你只使用Swagger来调试界面，也不用担心了！细心的朋友应该能发现JsonHero只支持查看JSON，不支持编辑，所以编辑JSON必须使用JsonVisio。不过项目作者在Issues中回复说以后的版本会支持。项目地址JsonHero:https://github.com/jsonhero-i...JsonVisio:https://github.com/AykutSarac...
