当前位置: 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开发格式化和高亮插件基本信息

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

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

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

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

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

当前插件其他版本列表

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

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

JSON-handle

开发者插件 2019-10-31 09:23:38

JSON-handle 是一款功能强大的 JSON 数据解析 Chrome 插件。它以简单清晰的树形图样式展现 JSON 文档,并可实时编辑。针对数据量大的场景,可以做局部选取分析。

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

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

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

JSON Viewer Awesome

开发者插件 2019-11-04 11:10:24

This extension assist you to visualize JSON response from any website or API request in your browser. It introduces you with awesome JSON prettifying experiences. It has many unique features that make

JSON-handle v0.5.6

开发者插件 2019-10-31 09:23:01

JSON-handle 是一款功能强大的 JSON 数据解析 Chrome 插件。它以简单清晰的树形图样式展现 JSON 文档,并可实时编辑。针对数据量大的场景,可以做局部选取分析。

JSON-handle2

开发者插件 2019-10-30 17:12:57

JSON-handle 是一款功能强大的 JSON 数据解析 Chrome 插件。它以简单清晰的树形图样式展现 JSON 文档,并可实时编辑。针对数据量大的场景,可以做局部选取分析。

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

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

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

推荐五款程序员必备的chrome插件

聚合专题 2020-04-04 20:43:15

我们都知道程序员是从事程序开发、程序维护的专业人员。那么程序员的工作效率怎么那么高呢?下面小编就给大家介绍五款程序员必备的chrome插件,让你了解程序员的世界。 程序员必

Web Developer Toolbar

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

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

Page Ruler - chrome屏幕尺子插件

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

Page Ruler是一款可以测量Chrome浏览器中网页元素大小尺寸的谷歌浏览器插件。页面尺寸测量工具,前端设计师专用。可以测量页面元素、图片和文本的尺寸、位置。Page Ruler是一款可以快速

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

Web Developer Toolbar Chrome插件

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

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

WebGL Inspector Chrome插件

开发者插件 2016-12-13 07:44:47

Debug, diagnose, and explore WebGL scenes.
WebGL Inspector is a tool inspired by gDEBugger and PIX with the goal of making the development of advanced WebGL applications easier. What Firebug and D

Give Me CRX Chrome插件

开发者插件 2015-01-12 19:20:45

获取任何Chrome扩展
**更新了2014年9月
源.crx格式的文件扩展
立即得到.crx格式的任何Chrome扩展的源文件,通过右键点击上下文菜单。

PS :请报告bug和/或提供建议,以改善这个扩展:)

Backbone Debugger Chrome插件

开发者插件 2015-02-01 08:56:27

开发工具扩展调试Backbone.js的应用。
添加在Chrome开发人员工具,在实时显示你所有的应用程序的意见,模型,集合和路由器面板。数据显示,包括:
- 浏览次数:渲染状态, html元素,相关的模型和/或收集,处理页面事件,事件触发
- 型号:上次同步的状态,属性, ID , CID ,网址,联系采集,事件触发,同步行动
- 类别:上次同步的状态,型号,网址,事件触发,同步行动
- 路由器:事件触发(包括路由)

扩展元素&

Copy Css Selector v0.5.0.3 Chrome插件

开发者插件 2019-10-09 16:24:57

为页面上的任何元素找到唯一的选择器。
它会找到一个对所选元素唯一的最佳选择器。用鼠标右键单击元素,然后选择 “将 Css 选择器菜单项复制到缓冲区”,这样您就可以将复制的选择器传递给任何文本编辑器。
对于快速获取用于测试框架 (如 Selenium) 的任何元素的选择器非常有用。

DekuSan Chrome插件

开发者插件 2020-05-15 07:51:09

DEXON block Browser 浏览器扩展
DekuSan 是在普通 Chrome 浏览器中访问支持 Ethereum 的分布式应用程序或 “Dapps” 的扩展!
扩展将 DEXON web3 API (Ethereum 兼容) 注入每个网站的 javascript 上下文中,以便 dapps 可以从区块链中读取。 dekuSan 还允许用户创建和管理自己的身份,

DevTools Author v0.6.6 Chrome插件

开发者插件 2020-01-09 14:51:43

如果您将 DevTools 用作前端开发环境的一部分,那么 
DevTools 作者将提供一小部分选项来增强您的创作体验。从 25 个编辑器主题中进行选择自定义字体支持控制字体大小 (10px-22px)
安装
----------------------------------------------------------- */> 添加扩展
• 启用开发者

Visual Inspector(前端重构+视觉走查辅助工具) Chrome插件

开发者插件 2020-03-28 02:02:32

Visual Inspector

> 这款插件可以高效的帮助前端工程师重构和设计师UI走查,也可方便前端工程师UI自查。前端工程师在重构阶段就能快速发现页面和视觉稿的差异,减少后期和设计师的UI走查时间:)

> 可以随意修改设计稿`大小`,`位置`,`透明度`,`混合模式`等,方便各种设计风格的UI对比。

> 如果你在做页面重构,实时功能可以很

JetBrains IDE Support v2.0.10 Chrome插件

开发者插件 2019-03-05 20:23:21

使用 Google Chrome 的 JetBrains IDE 支持扩展在 web storm 2017.2 或更早版本 (或 JetBrains 的其他 IDE) 中调试客户端应用程序或者在 web storm 2018.2 或更早版本中使用实时编辑功能。

QR二维码生成 v1.2.8 Chrome插件

开发者插件 2019-10-16 07:17:28

生成当前网页URL的二维码。

特点:

1. 默认生成当前网页URL的二维码
2. 自动将本地(localhost/127.0.0.1)域名替换为对外的IP
3. 能生成任何文本内容为二维码
4. 能将二维码下载到本地
5. 具有URL历史记录功能
6. 可设置二维码中心logo图及其大小
7. 可改变二维码前/背景

网页设计检测助手 Chrome插件

开发者插件 2019-04-30 14:04:53

简介:是一种快速,简便的方法来测试您的网站,在其他设备上的匹配情况。
功能说明:是一种快速,简便的方法来测试您的网站,在其他设备上的匹配情况。除了已提供的设备型号,您也可以手动添加设备。

Menu button Chrome插件

开发者插件 2015-03-18 13:50:09

自定义菜单允许用户创建一个菜单来访问各种网络资源
我们翻译菜单按钮到你的母语:http://menubutton.ru/l10n/

推广谷歌Chrome浏览器™菜单按钮允许用户创建自己的Chrome扩展 - 不知道编程的基础知识的快捷方式到各种网络资源。扩展可能是有用的论坛和社交网络的常客下Chrome扩展的一键创建自己的菜单系统。您也可以将菜单在网络上与朋友分享他们

可用类型的菜单项:
项目 - 连接到网络资源;
文件 - 打开文件在新