JsonFormatter可以让开发者在浏览器查看接口的的层级信息，方便开发。
JsonFormatter的使用非常简单，安装即可自动生效，处理的效果也很明显，让json数据结构清晰可见。
我们以一言接口为例
https://v1.hitokoto.cn/?encode=json
原版
原版 星星只有在夜里才璀璨夺目啊
启用扩展程序JsonFormatter处理后
扩展程序JsonFormatter处理后
数据结构顿时一目了然
2021-02-18 10.45.27
如何使用Json返回的数据
在网页插入以下代码
代码语言：javascript复制<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<h2>经典台词</h2>
<div id="yiyan_hitokoto"></div>
<div id="yiyan_from" style="text-align: right">
</div>
<script>
jQuery.ajax({url:'https://v1.hitokoto.cn/'}).done(function(content,err){
console.log("content::", content, "err::", err);
if(err === "success"){
var yiyan_hitokoto = "";
var yiyan_from= "";
console.log("content22::", content, "err::", err);
yiyan_hitokoto = content.hitokoto;
yiyan_from ="--" content.from;
console.log("=yiyan_hitokoto=>>", yiyan_hitokoto);
console.log("=yiyan_from=>>", yiyan_from);
jQuery("#yiyan_hitokoto").html(yiyan_hitokoto);
jQuery("#yiyan_from").html(yiyan_from);
}
})
</script>最终效果为：
经典台词
每次刷新页面，都会自动更新内容
《JsonFormatter》开源地址
https://github.com/callumlocke/json-formatter
《JsonFormatter》 下载链接
Chrome商店
https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa
Edge商店
https://microsoftedge.microsoft.com/addons/detail/json-formatter-for-edge/njpoigijhgbionbfdbaopheedbpdoddi
离线包
https://raw.githubusercontent.com/zhaoolee/ChromeAppHeroes/master/backup/095-json-formatter.zip
小结
JsonFormatter几乎是开发必备的工具，没有什么附加功能，使用简单，轻量高效，功能够用。
写在最后(我需要你的支持) / At the end (I need your support)
- 本文属于Chrome插件英雄榜 项目的一部分, 项目Github地址: https://github.com/zhaoolee/ChromeAppHeroes
- This article is part of the ChromeAppHeroes project. Github link : https://github.com/zhaoolee/ChromeAppHeroes
- Chrome插件英雄榜, 为优秀的Chrome插件写一本中文说明书, 让Chrome插件英雄们造福人类, 如果你喜欢这个项目, 希望你能为本项目添加一颗 ?星.
- ChromeAppHeroes, Write a Chinese manual for the excellent Chrome plugin, let the Chrome plugin heroes benefit the human, If you like this project, I hope you can add a star ? to this project.
