什么是 JSON 查看器？
JSON 查看器是一种工具，它解析原始 JSON 文本并以人类可读、可交互的格式显示。原始 JSON 难以阅读——尤其是深层嵌套的结构或压缩数据——而查看器将其转换为带有语法高亮的可导航树形结构。
为什么 JSON 查看很重要
原始 JSON 的挑战
来自 API 响应或日志文件的未格式化 JSON 看起来像：
{"users":[{"id":1,"name":"Alice","roles":["admin","editor"],"profile":{"age":28,"city":"NYC"}},{"id":2,"name":"Bob","roles":["viewer"],"profile":{"age":35,"city":"LA"}}]}
这在技术上是有效的，但几乎无法一眼阅读。
格式化视图
相同的数据经过适当缩进：
{
"users": [
{
"id": 1,
"name": "Alice",
"roles": ["admin", "editor"],
"profile": {
"age": 28,
"city": "NYC"
}
},
{
"id": 2,
"name": "Bob",
"roles": ["viewer"],
"profile": {
"age": 35,
"city": "LA"
}
}
]
}
树形视图
交互式树形视图允许折叠和展开部分、搜索特定键、理解数据层次结构，而无需滚动整个文档。
JSON 查看器功能
语法高亮
按数据类型着色有助于快速识别：
- 字符串（通常为绿色）
- 数字（蓝色或紫色）
- 布尔值（橙色）
- 空值（灰色）
- 键（红色或黄色）
- 括号和大括号（白色/默认）
路径导航
当悬停或点击某个值时，显示其完整的 JSON 路径：
$.users[0].profile.city= "NYC"$.users[1].roles[0]= "viewer"
这对于编写 JSONPath 查询或理解代码中的数据访问非常有用。
搜索和过滤
在大型 JSON 文档中查找键或值的所有出现。在处理包含数百个字段的 API 响应时至关重要。
模式检测
一些查看器会检测模式并建议隐含的模式——所有用户具有相同的字段，数组包含一致类型的对象等。
JSON 路径表达式
JSONPath 是一种用于 JSON 的查询语言（类似于 XML 的 XPath）：
$ 根元素
.key 访问对象属性
[0] 按索引访问数组元素
[*] 所有元素
..key 递归下降（在任何位置查找键）
[?(@.age>18)] 过滤表达式
在我们的用户数据上的示例：
$.users[*].name→ ["Alice", "Bob"]$.users[?(@.id==1)].profile.city→ "NYC"$.users[*].roles[0]→ ["admin", "viewer"]
JSON Schema 验证
JSON Schema 定义了 JSON 数据的结构和约束：
{
"type": "object",
"properties": {
"users": {
"type": "array",
"items": {
"type": "object",
"required": ["id", "name"],
"properties": {
"id": {"type": "integer"},
"name": {"type": "string"}
}
}
}
}
}
根据模式验证 API 响应可以及早发现集成错误。
常见 JSON 查看器用例
API 开发
调用 API 端点后，将响应粘贴到查看器中，以在编写代码消费数据之前理解数据结构。
调试
当函数接收到意外数据时，将值复制到 JSON 查看器以查看确切内容——空值、错误类型、缺失字段。
配置审查
JSON 格式的配置文件（package.json、tsconfig.json 等）在突出结构的查看器中更容易审计。
日志分析
记录结构化 JSON 的应用程序（结构化日志）生成可查看的记录，使调试比纯文本日志更清晰。
使用 JSON 查看器工具
我们的 JSON 查看器：
- 粘贴或输入 JSON — 接受压缩或格式化输入
- 交互式树形视图 — 展开/折叠任何节点
- 语法高亮 — 按值类型着色
- 搜索 — 在文档中任何位置查找键或值
- 格式化/压缩切换 — 在可读和紧凑视图之间切换
- JSON 路径 — 显示当前选中值的路径
- 验证 — 报告语法错误及行号
- 下载 — 将格式化 JSON 保存为文件
该工具高效处理大型 JSON 文档，适用于日常开发工作中的 API 响应检查、日志分析和配置审查。