【好物推荐】JSONView,一款查看json数据的神器
2023-09-14 09:14:14 时间
一、JSONView是什么?
- 一款JSON数据的可视化的插件
- 用于查看JSON数据的神器。
- 目前最热门的一款开发者工具插件
- 确切的来说jQuery JSONView是一款非常实用的格式化和语法高亮JSON格式数据查看器jQuery插件。
二、JSONView能做什么?
2.1 AS IS(现状描述)
实际开发工作中经常用到JSON数据,通常来讲,JSON数据一般没有经过格式化或经过了unicode编码,没有缩进,没有换行等,给开发者阅读造成了一定困难。
比如如下,通过访问后端API,返回的JSON数据如下(真的很丑)
询问:如何在谷歌浏览器中访问URL地址返回的JSON数据能否按照JSON格式展现出来。
2.2 To Be(改善描述)
而JSONView插件可以自动对json数据转码,缩进,格式化,直接显示出格式化后的数据,同时它还支持各种数据类型的语法高亮,以及节点的收缩和展开等。使得开发人员可以更好的阅读信息。
安装了JSONView扩展程序后的展现效果如图,很明显,效果更好。
感觉上是不是清爽了许多,层次结构,一目了然。
三、谷歌浏览器中安装JsonView扩展程序
那么,怎么引入这个插件咧?以下是具体的步骤说明
3.1 下载并解压扩展程序压缩包
下载JsonView扩展程序压缩包
下载地址:https://github.com/gildas-lormeau/JSONView-for-Chrome
点击【Clone or download】——【Download Zip】
解压这个压缩包
3.2 打开Chrome扩展程序界面
打开谷歌浏览器的扩展程序界面
方式一:在谷歌浏览器地址栏中输入:chrome://extensions/
方式二:按以下顺序进入
3.3 加载JSONView扩展程序
选中开发者模式,点击【加载正在开发的扩展程序…】
选择插件目录(D:\JSONView-for-Chrome-master\WebContent)
注意:一定要选到WebContent目录下哦
3.4 重新加载(Ctrl+R)
点击确定后,就安装上了。安装后界面如下: 安装完成,重新加载 (Ctrl+R)。
四、美化样式
用于给Chrome的插件JSONView的CSS3的配色代码。
4.1 点击选项按钮,选择构建自定义主题
4.2 修改样式文件
4.3 修改前与修改后对比
body {
white-space: pre;
font-family: monospace;
font-size: 15px;
background-color: #3A3A40;
color: #E4EAF2;
}
.property {
font-weight: bold;
font-family: sans-serif;
color: #F4A81B;
}
.type-null {
color: #EDC2FF;
}
.type-boolean {
color: #F2F0C9;
}
.type-number {
color: #FF7824;
}
.type-string {
color: #6BCBFF;
}
.type-string. {
color: black;
}
.callback-function {
color: #F4A81B;
}
.collapser:after {
content: "-";
color: #E4EAF2;
}
.collapsed > .collapser:after {
content: "+";
color: #E4EAF2;
}
.ellipsis:after {
content: " … ";
color: #E4EAF2;
}
.collapsible {
margin-left: 2em;
}
.hoverable {
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
border-radius: 2px;
color: #E4EAF2;
}
a {
color: #E8E363;
font-style: italic;
}
.hovered {
background-color: black;
}
.collapser {
padding-right: 6px;
padding-left: 6px;
}
五、参考地址
相关文章
- js 二维数组 添加json数据及js数组与json字符串「建议收藏」
- 【R语言】根据映射关系来替换数据框中的内容
- mybatis返回两个字段数据_java接口接收json数据
- JuiceFS 元数据引擎选型指南
- R数据科学整洁之道:使用dtplyr处理大文件
- MySQL 添加数据 insert 命令及优化
- 在SQL Server中将数据导出为XML和Json的方法
- Go语言使用匿名结构体解析JSON数据
- MySQL玩转JSON:实现轻松的数据存储和处理(mysql处理json)
- 字段MySQL查询:如何支持JSON字段(mysql查询json)
- 如何在MySQL中实现JSON缩进(mysql中json缩进)
- MySQL中使用JSON格式存储数据(mysql中json)
- 破解JSON数据,Oracle数据库助力转换(json转oracle)
- 妙用JSON函数灵活操控Oracle数据库(json函数oracle)
- 精简操作以JSON方式修改Oracle数据库中的数据(json修改oracle)
- 利用Oracle实现去年同期数据的分析(oracle中的去年同期)
- mysql比拼Redis和MySQL谁才是数据存储首选(redis能不能访问)
- Oracle 11g接口技术开启丰富数据应用之门(oracle11g接口名)
- web页面数据展示新想法(json)
- JQuery获取json数据$.getJSON方法的实例代码
- newtonsoft.json解析天气数据出错解决方法
- JSON数据转换成Java对象的方法
- jQuery实现异步获取json数据的2种方式
- 使用JSON.parse将json字符串转换成json对象的时候会出错