当前位置: Chrome插件首页 > 开发者插件 > JSONView:web开发格式化和高亮插件 Chrome插件 > JSONView:web开发格式化和高亮插件 Chrome插件详细图文介绍

JSONView:web开发格式化和高亮插件 图文介绍

JSONView:web开发格式化和高亮插件 Chrome插件图片JSONView:web开发格式化和高亮插件 Chrome插件图片JSONView:web开发格式化和高亮插件 Chrome插件图片

Jsonview是目前最热门的一款开发者工具插件,确切的来说jQuery JSONView是一款非常实用的格式化和语法高亮JSON格式数据查看器jQuery插件。它是查看json数据的神器。

注:中文翻译来自GOOGLE

Jsonview插件概述

jsonview插件是什么?
Jsonview是目前最热门的一款开发者工具插件,确切的来说
jQuery JSONView是一款非常实用的格式化和语法高亮JSON格式数据查看器jQuery插件。它是查看json数据的神器。
jsonview

Jsonview插件有什么用?
通常来讲,json数据一般没有经过格式化或经过了unicode编码,没有缩进,没有换行等,给开发者阅读造成了一定困难。而jsonview插件可以自动对json数据转码,缩进,格式化,直接显示出格式化后的数据,同时它还支持各种数据类型的语法高亮,以及节点的收缩和展开等。使得开发人员可以更好的阅读信息。
jsonview效果图


Jsonview插件下载安装

JSONView插件哪里可以下载?你可以从chrome应用商店里找到Jsonview插件,如果你的chrome应用商店无法打开,你可以在本站的下方找到Jsonview插件下载地址。

JSONView插件怎么安装?
1. 如果你能够打开chrome应用商店,并且可以找到
Jsonview插件,那么直接点击“添加至chrome”,如下图所示:

jsonview插件
2.如果你的chrome应用商店无法打开,你从本站或者其他途径获得了
Jsonview插件,那么就选择离线安装该插件。由于Jsonview插件同其他chrome插件一样都是CRX格式的,所以具体的安装方法请参照:怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件? 如果CRX格式插件不能离线安装怎么办

Jsonview插件使用方法

jsonview安装成功后,我们在chrome扩展程序里面可以看到jsonview插件,如下图所示:
jsonview安装成功

Jsonview插件怎么用?Jsonview如何使用?

1.下载压缩包,在页面中引入jquery和jquery.jsonview.js,以及jquery.jsonview.css文件。

1
2
3
<link rel="stylesheet" href="dist/jquery.jsonview.css">
<script src="js/jquery.min.js"></script>
<script src="dist/jquery.jsonview.js"></script>   

2.关于如何设置JSONView语法高亮?

jQuery JSONView插件中的语法高亮是通过CSS来渲染不同数据类型的字符串,例如,可以在CSS中设置布尔型的数值为蓝色,字符串类型为绿色等等。jquery.jsonview.css文件中已经预设了各种高亮颜色,你可以根据实际情况自行修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
.jsonview .null {
    colorred;
}
.jsonview .bool {
  color#fde3a7;
}
.jsonview .num {
  color#bf55ec;
}
.jsonview .string {
  color#00b16a;
  white-space: pre-wrap;
}  

3.如何初始化jsonview插件?

在页面DOM元素加载完毕之后,可以通过JSONView()方法来初始化该插件。也可以在初始化时传入配置参数。

1
2
3
4
5
6
7
var json = {"hey""guy","anumber": 243,"anobject": {...},...};
 
$(function() {
  $("#json").JSONView(json);
  // with options
  $("#json-collasped").JSONView(json, { collapsed: true });
});   

4.如何配置jsonview参数?

jQuery JSONView插件可以使用以下一些配置参数。

  • collapsed:是否在第一次渲染时收缩所有的节点,默认值为:false。
  • nl2br:是否将一个新行转换为<br>字符串,默认值为false。
  • recursive_collapser:是否递归收缩节点,默认值为false。
  • escape:Escape HTML in key, default is true。

5.如何控制jsonview节点?

jQuery JSONView提供了以下的方法来控制JSON节点,所有的方法都接收一个level参数来在相应的节点上执行操作。

  • jQuery#JSONView('collapse', [level]):收缩节点。
  • jQuery#JSONView('expand', [level]):展开节点。
  • jQuery#JSONView('toggle', [level]):切换节点.
  • 6.复制请求地址-json的url,粘贴到浏览器的地址栏-》确认。结果如下图所示:
  • jsonview结果
  •  
  • 更多web前端开发插件推荐 

Jsonview插件英文介绍

Validate and view JSON documents
JSONView port for Chrome.

Original firefox extension is here: http://benhollis.net/software/jsonview/

Notes:
- JSON is validated using a client-side javascript implementation of JSONLint (http://github.com/zaach/jsonlint)
- this extension displays JSON text compliant with rfc 4627 (http://www.ietf.org/rfc/rfc4627.txt).
- JSONP (http://en.wikipedia.org/wiki/JSON#JSONP) is supported



You can configure JSON parsing method in options page:
- the default method (JSON content is extracted from displayed page) is faster but can (in some rare cases) alter or fail to parse the JSON content.
- the safe method costs an extra XMLHttpRequest request (JSON content is extracted from the HTTP response) but is 100% safe.

当前插件其他版本列表

JSONView:web开发格式化和高亮插件 相关插件推荐

show ip

开发者插件 2014-11-22 17:24:10

show ip
显示请求页面的ip地址。

1. 帮助开发和测试人员根据ip来区分测试、预发、线上环境。
2. 如果你需要。


2014-1-11
1.修复pdf全屏时覆盖整个屏幕的问题
2.修复导航页显示undefined的问题
3.新增开发者工具面板
4.调整了显示的字体

CrapApi-接口调试工具

开发者插件 2019-04-29 22:21:37

CrapApi接口调试工具是CrapApi接口管理系统的插件,可以单独使用,用于接口调试,也可配合管理系统使用,登录后可直接同步管理系统中的接口。


ApiDebug & CrapApi-Plug(crapApi)区别:
ApiDebug为独立插件,与CrapApi接口管理系统接口数据没有互通,能不依赖服务器运行,服务器仅作数据备份
CrapApi-Plu

页面资源引用统计工具

开发者插件 2015-10-24 18:55:56

由于一些原因,本插件v2版本下载地址有更新,请访问后面地址获取 https://chrome.google.com/webstore/detail/igdijndkhmgefapknfgapbanahmlhfha
统计页面资源的域名,线上域名引用非白名单的资源,页面下方提示错误

jQuerify

开发者插件 2015-03-19 12:53:39

注jQuery的最新稳定版本为你想要或指示jQuery的存在,如果它被包含页...
注入jQuery的最新稳定版本为你想要或表明是否包含页面上已有的jQuery存在任何页面的任何页面。它允许您使用控制台外壳注入的jQuery(您可以通过调用浏览器的控制台和QUOT;按Ctrl Shift J&QUOT;在PC或QUOT;选项 命令 J&QUOT;在Mac上),并看到迹象,如果jQuery的已经是注入到当前页面

要jQuery注入选定的选项卡中点击扩展按钮

天蓬插件

开发者插件 2017-07-26 21:34:48

Tianji for data extraction from websites
天机网络信息云采集平台开发的配套插件,用于采集网络中的公开数据,无需开发基础,只需要使用浏览器和平台提供的插件,就能对页面的数据进行可视化的配置。同时,云采集平台支持将插件中的配置方案同步到云端,在云端的配置后台,您可以增加更多的配置信息用于满足更专业的需求。

META SEO inspector v2.1.0

开发者插件 2022-05-03 11:11:57

2018 更新!
添加了许多修复程序,并更新了一些新规则,如描述的新 230 个字符限制。
元数据不仅仅是通常的 HTML 元标签,还有 XFN 标签、各种微格式、最近引入的规范属性、无

Window Resizer Pro

开发者插件 2019-02-13 23:55:12

一次更改屏幕的大小。

這將使網頁設計師,網頁設計師,開發人員等的生活變得更輕鬆,
因為它允許您快速選擇適當的瀏覽器窗口大小進行測試。

與辦公室搜索必要的

HTML5高清二维码生成器

开发者插件 2015-10-15 09:44:41

url,中文短信,文字、电话号码...一秒 到手机,精准简洁易用的二维码生成器,提供离线生成功能,使用方便,欢迎使用,新版有重大功能更新,提供放大和离线下载功能
html5高清二维码重新发布,我们只做安全,无广告,无木马的二维码插件。

html5高清二维码由miliguli.com提供。

CSS Dig v1.2.3

开发者插件 2020-01-06 12:43:14

CSS Dig 在大多数网站上查找和分组样式表和样式块,为分析代码和计划重新调整提供了一种简单的方法。属性: 看看你所有的 CSS 属性,它们的频率和变化。蓝色的色调太多了?不一致通常意味着你的开发人员的混乱和最终用户的违规行为。选择器和特异性: 你的选择器长吗?使用大量 IDs?特殊性战争令人沮丧,不断增加新的 CSS 只会让情况变得更糟。发现潜在的问题区域并制定解决方案。

PlantUML Viewer

开发者插件 2015-05-11 11:12:16

显示图形和图表由PlantUML(UML,Ditaa和点)呈现。
#PlantUML

呈现UML图在一个文本文件中定义。对于文本文件的完整语法,请参见:
http://plantuml.sourceforge.net/index.html

1。安装扩展的Chrome网上应用店。
2。检查&QUOT;允许访问文件网址&QUOT;铬://扩展/
3。打开本地或远程的文本文件,UML图定义的浏览器(与@startuml文本开始

Web Developer Checklist v1.8.6

开发者插件 2020-03-14 21:42:21

对于希望确保遵循最佳实践的 web 开发人员来说。此扩展允许您非常容易地发现网站中的问题区域。
这是 web devcheck list.com 的伴随扩展

GO GO GO!

开发者插件 2018-04-10 20:53:48

提供以 css 选择器为基础的数据收集
在选择器为空的时候直接打开搜素页

Better Ruler

开发者插件 2019-04-16 11:06:34

> 一个网页测量工具,它可以吸附到网页元素周围,从而更方便的测量。

- 点击插件图标即可开始测量,再次点击将退出测量。
- 移动鼠标的同时按住`Alt`键,可实时显示当前鼠标所在位置的元素的大小。
- 移动鼠标的同时按住`Alt`键,如果在吸附范围内(距离元素边界50px内,距离顶点15px内,可在底部工具栏自定义)可自动吸附。
- 按下`f`键,显示和隐

Alexa Traffic Rank - Alexa网站排名查询

开发者插件 2019-02-22 16:30:05

Alexa Traffic Rank是Alexa出品的一款浏览器开发者插件,可以统计世界各地的网站的流量排名。Alexa发布的世界上各大网站的流量排名,主要分为综合排名和分类排名,Alexa提供了包括综合排

迅售狮打印设置插件

开发者插件 2016-03-26 17:13:40

迅售狮:打印设置插件.
此项目属于浏览器打印插件,与打印设置程序交互,装上可以使用户在web上设置打印机参数

Quick Javascript Switcher

开发者插件 2014-12-04 21:42:31

快速的方法来启用/禁用的Javascript
快速切换的Javascript是一个Chrome扩展,关于由主机和子飞启用/禁用JavaScript的
(不像克里斯Pederick的& QUOT ; Web开发& QUOT ;扩展谁在全球禁用JavaScript的)

例如,禁用JavaScript的上www.google.fr没有禁用translate.google.fr

要永久禁用JavaScript的JS ,打开右键关联菜单,还有就是打开C

PHP Console

开发者插件 2022-05-03 11:14:09

显示PHP错误和放大器;瓦尔转储在谷歌Chrome浏览器的控制台和通知弹出窗口,远程执行PHP代码
处理PHP错误/异常,倾倒PHP瓦尔,使用这个扩展远程执行PHP代码,做其它很酷的事情,它是

Remove line breaks from translator

开发者插件 2020-03-15 14:31:24

用来自动去除换行符,并自动分段(仅支持英文到其他语言的翻译),使翻译更准确。
支持以下翻译网站:
translate.google.cn
translate.google.com
fanyi.youdao.com
fanyi.baidu.com
cn.bing.com/translator

暂没有插件开关按钮,后面再增加。

Ruby开发文档

开发者插件 2015-02-13 19:05:34

Ruby开发文档网站(doc.rubyfans.com)的Chorme浏览器插件
Ruby开发文档网站(http://doc.rubyfans.com)为您提供Ruby和一些基于Ruby的优秀开源软件的在线API文档查阅服务,例如Rails、Rack等。为Ruby程序员提供高速、方便快捷的API查阅服务是我们的唯一宗旨。