JSON 树形查看

本地处理
app.tree.view

也可通过 #data={"name":"Ada"}#url=... 灌入数据,读完即从地址栏清除。

把 JSON 显示成可折叠的树。层级很深、字段很多时,比在纯文本里找括号更清楚,也能看到每个节点的类型。点节点可复制 JSONPath,方便写到测试或 JSONPath 页里验证。

展开 / 折叠

先收起无关分支,只看当前关心的路径。默认会展开较浅的几层,更深的节点点开即可。

对象显示字段个数,数组显示元素个数,方便估计体积。

类型一眼能看出来

对象、数组、字符串、数字、布尔和 null 会区分开。避免把 "123"123 看成一回事。

适合在联调时确认后端实际返回的类型。

和字段识别互补

树负责结构;时间戳、色值请用字段识别页。两者搭配:先在树上定位路径,再看叶子是不是特殊格式。

只读浏览,不会在树上直接改业务数据。

示例

适合用树看的数据
{
  "project": "json-toolbox",
  "config": {
    "theme": "light",
    "limits": { "maxSizeMB": 10 }
  }
}
你会看到
 根是对象 → config 是对象 → limits 是对象 → maxSizeMB 是数字。点开节点即可,不必数括号。 
能在树上直接改值吗?

本页以查看为主。改完再校验,请回到格式化页粘贴。

特别大怎么办?

尽量先用 JSONPath 抽出子树,再展开查看。

点击节点做什么?

会尝试把该节点的 JSONPath(如 $.user.id )复制到剪贴板,方便写断言。

和格式化哪个先用?

先保证合法 JSON。非法文本无法画树,请先校验或格式化。

推荐工作流

  1. 粘贴合法 JSON,或加载示例看树如何展开。
  2. 折叠不相关分支,点到目标字段。
  3. 复制路径,拿到 JSONPath 页验证,或写进测试代码。
  4. 叶子像时间戳或 URL 时,再用字段识别页确认。

树形适合「看结构」;JSONPath 适合「批量取值」。大文档两者一起用比整页展开更快。