给 Chrome 浏览器安装 JSONView 插件

在实际项目中,很多接口都是以 JSON 的格式返回给前端。前后端联调时,为了快速定位问题,往往希望方便展现返回的 JSON 数据。这时可以给 Chrome 浏览器安装 JSONView 插件,该插件可将返回的 JSON 数据直接显示在页面上,省去需要 F12 看网络调用。

比如:访问地址:https://jsonview.com/example.json,没有安装插件时 Chrome 展示的数据如下,很难看清楚 JSON 层级关系:

安装 JSONView 插件后,展示效果如下,已经格式好 JSON 数据了:

是不是直观很多?O(∩_∩)O

安装步骤

下载扩展程序

JSONView 的官网为:https://jsonview.com,可点击安装链接在线安装。

但是国内是访问不了 chrome.google.com 的,所以需要选择下载离线包。

访问插件的 GitHub 地址:https://github.com/gildas-lormeau/JSONView-for-Chrome

点击【Clone or download】–>【Download ZIP】,下载 Zip 包到本地,并解压。

安装到 Chrome

打开 Chrome 的开发者模式,点击“加载已解压的扩展程序”,找到到刚才解压的目录,注意:要选择到 WebContent 目录:

如果扩展程序中出现插件卡片则表示安装成功了。一般没问题的,这个插件比较稳定。

安装好后,再次刷新请求就可以看到格式化 JSON 后的效果了。