JSON 树形查看器

树形展开 JSON,查看层级与访问路径

浏览器内运算JSON Viewer工具型01 — 格式化与校验

什么是JSON 树形查看器?

JSON 树形查看器把嵌套数据渲染成可折叠的层级结构,每个分支标注类型与子项数量,叶子节点悬停时显示访问路径。适合快速看懂深层嵌套的接口返回,解析在本地完成。

怎么用JSON 树形查看器?

  1. 1粘贴 JSON,右侧即时生成结构树。
  2. 2点击分支节点折叠或展开,默认展开两层。
  3. 3把鼠标移到任意节点右侧的 ⓘ 上,可看到该节点的访问路径(形如 $.items[0].sku),点击复制。
  4. 4在左侧编辑器里悬停任意字段,行尾会出现一个准星图标,点击即可在右侧结构树中展开并高亮对应节点——几万行的接口返回里找某个字段时,这一步省去手动一层层展开。

常见问题

为什么不直接看格式化后的文本?+

当嵌套超过三四层、数组元素又很多时,格式化文本会长到需要反复上下滚动。树形视图可以先折叠掉无关分支,只展开正在排查的那一条路径,定位速度明显更快。

在几万行的 JSON 里怎么快速找到某个字段在结构中的位置?+

先用编辑器的查找(Ctrl+F / ⌘F)跳到那一行,然后把鼠标停在这一行上,行尾会出现一个准星图标;点它,右侧结构树会自动展开这个字段的每一级祖先、滚动到位并短暂高亮。反过来,节点右侧的 ⓘ 会给出该节点的完整访问路径,可直接复制到代码或 jq 里用。

访问路径可以直接用在代码里吗?+

可以。展示的路径采用 JSONPath 风格,`$.a.b[0]` 去掉开头的 `$` 后就是 JavaScript 里的属性访问写法,也能直接给 jq 使用(jq 里写成 `.a.b[0]`)。

相关工具

全部工具