当前位置: Chrome插件首页 > 开发者插件 > JSONView:web开发格式化和高亮插件 Chrome插件

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

开发者插件
 

JSONView:web开发格式化和高亮插件 Chrome插件图文教程

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开发格式化和高亮插件 Chrome插件图片

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

JSONView:web开发格式化和高亮插件 Chrome插件基本信息

插件名称:JSONView:web开发格式化和高亮插件 插件作者:gildas 插件语言:English 官方站点:https://github.com/gildas-lormeau/JSONView-for-Chrome 插件唯一标识:chklaanhfefbnpoihckbnefhakgolnmc

JSONView:web开发格式化和高亮插件 Chrome插件用户数和评分

下载次数:609663 用户评分:4.6346 (共5分) 参与评分人数:1289

JSONView:web开发格式化和高亮插件 Chrome插件文件信息

当前版本:0.0.32.2 最后更新日期:2019-07-04 文件大小:94.03KB

JSONView:web开发格式化和高亮插件 Chrome插件下载地址

本站下载 已有 609663 人成功下载

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

JSON to Bootstrap table

办公插件 2019-01-17 14:07:19

JSON to Bootstrap table是一款JSON来引导表转换成一个JSON对象/数组到引导与排序的列启用合HTML5表格的chrome插件。

jsonView jsonViewer formatter json

开发者插件 2018-05-21 17:18:52

jsonView jsonViewer formatter json
该插件对中文做很好的支持,处理了了其他json插件显示中文时候出现的bug

格式化、着色、美观、易读。 。 。是开发的刚需。
新版本增加图片预

JSON Lite

开发者插件 2018-02-18 23:26:40

Fast JSON highlighter - shows items count/size, handles large files, collapse items
Fast non-blocking JSON viewer weighing in at just 4KB.

Features:

* Syntax highlighting
*

开发者常用的chrome json插件汇总推荐

聚合专题 2018-02-27 22:22:45

开发人员在查看代码时大多时候都需要自动对json数据转码,缩进,格式化,直接显示出格式化后的数据, 使得开发人员可以更好的阅读信息。 否则想要看清楚代码真的是非常痛苦的事

【图文详解】Chrome中安装JsonView插件

聚合专题 2018-09-04 22:28:40

Chrome中如何安装 JsonView插件 ?chrome插件网为您图文详解。 1.下载JsonView插件 在github中搜索JsonView,找到JsonView下载压缩包。 得到 2. 将插件添加到Chrome扩张程序中去 3.观察效果 启用JSON

Web Developer Toolbar

开发者插件 2019-02-13 23:43:21

Web Developer Toolbar 是一款运行于chrome浏览器网页开发工具插件,内建强大的调试和设置功能,为众多的网页开发人员提供想当实用的功能,几乎是每个网页设计师必备的工具。

JSONView:web开发格式化和高亮插件 同类插件推荐

Sibbell Chrome插件

开发者插件 2016-06-02 11:16:01

Extension for Sibbell.com
Enables a new tab page showing your latest 30 releases from Sibbell.com

Note: requires active subscription to the 'Chrome Extension' plan on sibbell.com

RenderCan Chrome插件

开发者插件 2016-07-10 21:45:37

A simple way to record a canvas. Convert to a movie with something like: `ffmpeg -r 60 -i canvas-%09d.png out.webm`
A simple way to record a canvas. It will record any canvas elements on the page

The shadow of the designs Chrome插件

开发者插件 2018-11-03 15:15:20

通过配置参考的图片地址(图片地址必须是可以通过http或https可访问的地址), 来调整html网页的间距样式,作出尽可能与设计师给的设计图匹配的网页。

madhOMT Chrome插件

开发者插件 2018-09-27 07:47:12

This lets you highlight an order number (perhaps in an NPS email) and right click to open it in OMT. Make sure you are logged in on admin. Please ping me with suggestions on how to make it better.

Jenkins Build Notifications Chrome插件

开发者插件 2015-01-27 19:06:03

最终詹金斯Chrome扩展为专业人士。
这是最终的詹金斯Chrome扩展为专业人士。

如果使用詹金斯CI为您自动构建和就业机会,那么你要使用我们的Chrome扩展。

每当作业由于某种原因失败,或者出现故障的作业成功,您将得到警报(通过浏览器)在桌面上。此外,你就可以轻松地查看你的工作状态,而无需浏览到您的詹金斯仪表板

特点:
*每当詹金斯作业成功或失败时收到警报
*支持跨多个不同的詹金斯服务器的多个作业

Image Fallback Chrome插件

开发者插件 2015-02-11 20:12:47

指定一个备用主机来检索,如果他们不能在原来的主机上找到的影像。
图像回退允许你指定一个备用主机来检索,如果他们不能在原来的主机上找到的影像。这有助于开发人员保持自己的形象资产同步的地方,分期和生产环境之间。

网站样式管理器-Stylish Chrome插件

开发者插件 2018-05-09 17:40:29

Restyle网络与时尚,一个用户样式管理器。时尚让你轻松安装主题和外观的许多著名景点。
用户风格主题的网站。用户样式赋予你的浏览体验,让你自定义的网站。拿出不相关的内容

ServerCheck Chrome插件

开发者插件 2018-11-09 06:02:34

Extension for checking the availability of several websites. If a website is not accessible a browser notification will show up.

The source code is available on GitHub: https://github.com/Ste

Slocher Chrome插件

开发者插件 2016-03-30 13:30:56

How many lines does this github-project contain?
Ever wondered how many source lines of code any given github project has? Well, wonder no more! - Simply install this extension and navigate to an

Browserstack Loader Chrome插件

开发者插件 2015-02-11 11:39:53

在与Browserstack飞行测试页面。
测试你的网页与Browserstack很简单,在大多数常见的浏览器有2次点击。
UPDATE 30-10-2014
- 增加了最新的浏览器版本,删除了旧版本
- 增加的Android 5.0

UPDATE 2014年11月3日
- 增加了最新的浏览器版本,删除了旧版本
- 增加运8.1 , OSX 10.9以及iOS 7
- Browserstack不支持较新版本