JSON 树形查看器

Web 工具

把 JSON 渲染为可折叠树形结构,支持关键字搜索、节点路径复制与 JSONPath 定位。渲染为可折叠的树形结构,支持按关键字搜索、复制节点路径与跳转定位。数组与对象会显示元素个数,深层嵌套可逐级展开或一键收起。适合浏览体量较大的接口响应与排查深层字段。可按层级折叠展开节点。可搜索关键字并复制节点路径。

有效 · 7 个键 · 2 个项 · 深度 3
JSON
树形视图
▾{$
▾user: {$.user
name: "Alice"$.user.name
age: 30$.user.age
▾tags: [$.user.tags
0: "admin"$.user.tags[0]
1: "user"$.user.tags[1]
]
}
active: true$.active
balance: 99.95$.balance
lastLogin: null$.lastLogin
}

关于 JSON 树形查看器

面对一大段嵌套很深的 JSON,纯文本很难看清层级关系。本工具左侧是带语法高亮的代码编辑器,右侧把 JSON 渲染成可折叠的树形结构:支持树内关键字搜索与高亮跳转、点击节点一键复制其 JSONPath 路径、内联显示数组长度与对象键数,并提供 Tree / 源码 / 表格三种视图切换。采用虚拟滚动技术,超大 JSON 树也不卡顿。所有处理均在浏览器本地完成,无需安装任何软件,它适合调试接口响应、审阅第三方返回的深层结构或在大 JSON 里定位某个字段。例如粘贴一段深层嵌套 JSON 会以可折叠树展示,并高亮类型颜色,支持搜索定位字段。定位字段时先搜索关键词再逐级展开,比手工数括号高效得多;复制出的路径可直接用于代码取值,审阅第三方返回结构时先看清数组与对象的嵌套层级,能减少联调时的沟通往返。

大文件的渲染方式直接决定工具是否可用,这一点在数据结构较深时尤其明显。浏览器要一次性构建所有节点才能完整折叠,文件达到数十兆时初始化就会明显卡顿,甚至让标签页失去响应。合理的做法是分层加载、只渲染展开的部分,或把超大的文件先在服务端做切片。因此在选用这类工具时,先确认它面对大文件的行为,而不是只看它在小样例上的表现。

结构化浏览与文本检索解决的是两类不同问题。结构化浏览适合理解层级关系、确认字段是否存在、核对嵌套的深度与类型;而文本检索适合在大文件里定位某个具体的值或键名,逐层展开反而低效。成熟的工具会同时提供两条路径:一棵可折叠的树,以及一个能在保持结构的前提下高亮命中的搜索框。缺任何一侧,都会让使用者在某一类任务上退化为手动翻找。

复制某个字段的路径看似小事,实际是高频操作。当需要在上层代码或接口调用里引用某个深层字段时,手动拼路径既慢又容易出错。因此一个实用的浏览工具应当支持点击节点复制其完整路径,并保持路径写法与目标语言的惯例一致(例如点号分隔与方括号索引的差异),这样才能直接粘贴使用而不是再改一遍。

数字的显示精度是一个容易被忽略的陷阱。结构里某些字段在语义上是「标识」而非「数量」,例如较长的编号或带前导零的字符串,但它们有时被写成不带引号的数字形式。此时部分语言的解析器会把它读成浮点数并改写末位,展示工具若跟着做同样处理,使用者会以为原数据就是这样。因此在浏览时区分「原始文本」与「解析后的值」很有必要。

最后,浏览与编辑的边界需要明确。多数查看工具是只读的,折叠、搜索与格式化都不会改数据;而一旦提供了编辑能力,就需要配套的校验与撤销机制,否则一次误删括号就可能让整份文件不可用却看不出问题所在。明确标注「只读浏览」并在需要修改时转向专门的编辑器,是更安全的分工。

实现原理

查看器把 JSON 解析成可折叠的树,因此「这个键属于哪一层」变成一眼可见的事实。折叠状态只是视图,不改变数据;大文件展开全部节点会占用大量内存,按需展开才能保持流畅。它只做展示与解析,不做校验,因此能正常显示不等于数据符合业务约定。

输入{"a":{"b":[1,2]}}
输出a → b → [1, 2](层级:顶层对象 → 对象 a → 数组 b)

使用方法

  1. 打开「JSON 树形查看器」
  2. 输入或粘贴待处理的内容
  3. 根据需要调整输出选项
  4. 点击「运行」按钮,结果实时显示
  5. 复制或导出结果

使用场景

  • 浏览接口数据 — 把接口返回的复杂 JSON 渲染成树,逐层展开查看你关心的字段。
  • 搜索定位字段 — 输入关键字即可高亮所有匹配的键或值,并用上下箭头在结果间跳转。
  • 复制节点路径 — 点击任意节点一键复制其 JSONPath(如 $.config.theme),直接用于代码或查询。
  • 表格查看数组 — 对象数组可切换为表格视图,像看 Excel 一样对比每行数据。
  • 检查大数据规模 — 虚拟滚动让数万节点的超大 JSON 也能流畅展开浏览,不冻结页面。

常见问题

能处理多大的 JSON?

得益于虚拟滚动,树视图只渲染可视区域的节点,数 MB、数万节点的 JSON 也能流畅展开,不会卡死页面。

怎么搜索树里的内容?

在搜索栏输入关键字,所有匹配的键或值会高亮,并显示命中数量,用 ↑/↓ 或回车在匹配项之间跳转。

怎么复制某个节点的路径?

把鼠标移到节点上会显示其 JSONPath,点击叶子节点即可复制路径(如 $.users[0].name),方便用于 JSONPath 查询或代码取值。

表格视图什么时候可用?

当根数据是对象数组(每个元素都是对象)时,可切换到表格视图,自动以字段并集作为列头。

和格式化工具有什么区别?

「JSON 格式化」输出带缩进的文本并支持编辑,本工具侧重交互式浏览:折叠树、搜索、路径复制与多视图,更适合理解超大或超深的 JSON。

展开几百层的深层 JSON 会卡顿吗?

不会。树视图用虚拟滚动只渲染可视区域内的节点,默认也会把深层大对象折叠起来,因此即便展开数万节点也保持流畅。若某次搜索跨大量命中,建议用精确匹配开关缩小范围,再逐级展开定位。

为什么有些键显示灰色、有些显示不同颜色?

颜色是 JSON 类型高亮:字符串、数字、布尔值、null 和键名各对应一种颜色(如字符串绿色、数字蓝色),红色常表示无效或错误节点。你可在设置里调整配色,也可关掉高亮只看纯文本。

超大 JSON 文件预览时卡顿?

树形渲染的节点数与 JSON 元素数成正比,几万个节点会明显变慢。折叠不需要的分支能显著减轻渲染压力;真正的大文件(几十 MB)建议用命令行 jq 查询,浏览器工具更适合中等规模的结构浏览。

广告