← 全部文章
更新于 May 29, 20266 min read

JSON 树形查看器:以可折叠树浏览 JSON

把 JSON 看作交互式可折叠树。展开和折叠任意对象或数组,以浏览大型嵌套负载 —— 在浏览器中完成,无需上传。

一份 5000 行的 API 响应当成纯文本根本读不下去。一个 可折叠的 JSON 树 能把那堵括号墙变成一个能逐枝展开、逐枝折叠的可交互结构 —— 让你不用滚动跨过所有别的东西就能找到关心的字段。本指南讲清 JSON tree viewer 是什么、对大型或深嵌套数据为什么比纯文本好，以及什么时候该用树而不是 formatter 或 validator。

什么是可折叠的 JSON 树？

JSON tree viewer 解析你的 JSON，并把它渲染成一棵可展开节点的层级，而不是扁平的一大块文本。每个对象 {} 和数组 [] 都成为一个节点，可以折叠成一行，或者展开露出它的子节点。这是 阅读 JSON 与 导航 JSON 的区别。

// 折叠状态 —— 一眼看到形状
{
  "user": {…},        ▶ 6 keys
  "orders": […],      ▶ 24 items
  "meta": {…}         ▶ 3 keys
}

点一个节点它展开；再点一下它就折叠回一行摘要，通常还附带隐藏的 key 或元素数量。数据本身从未改变 —— 改变的只是你在看其中多少。

为什么树比一堵文本墙更好

格式化（pretty-print）让 JSON 可读，但大型已格式化的文档仍然是几千行要滚的内容。树多加了 你能控制的结构：

  • 深嵌套数据 —— 配置文件、Kubernetes manifest 和 GraphQL 响应嵌套很多层。把你不关心的枝折起来，相关的那段就浮到上面。
  • 大型 API 响应 —— 把一个 500 元素的数组折成一行，只展开你正在调试的那一个元素。
  • 陌生的 payload —— 一切折到顶层，能在写下任何一行解析代码之前先即时拿到这套 API 的形状地图。
  • 结构对比 —— 折起的节点让你一眼看出两个 payload 共享哪些段。

展开、折叠和导航

一个好的 JSON tree viewer 给你的不止「点击切换」：

  • 逐节点展开/折叠 —— 只打开你在查的那一枝。
  • 全折叠 / 全展开 —— 一次性重置视图，而不是一个一个关。
  • 元素和 key 数量 —— 折叠节点显示 ▶ 24 items 或 ▶ 6 keys，让你不会迷路。
  • 语法高亮 —— key、字符串、数字、布尔和 null 各有不同颜色，类型一眼分明。
  • key 导航 —— 不用在几千行里滚就能跳到某个字段。

按路径查找：JSONPath 与 JMESPath

树一打开，紧接着的问题通常是 「这个 key 在哪？」。两种小型查询语言让你用路径而不是点击来定位值：

  • JSONPath —— 受 XPath 启发，已标准化为 RFC 9535。 $.user.orders[*].id 读作「user.orders 里每一个 id」。支持通配符、切片、过滤（?(@.price > 10)）以及递归下降（..price）。
  • JMESPath —— AWS CLI 的 --query 和许多云工具都用它。表面相近，但带有一等公民的投影和函数： users[?active].name。

tree viewer 用于探索；JSONPath/JMESPath 用于可复用的提取。配合用：先用树 找出 路径，再把它写成 JSONPath 表达式用在脚本里或 jq 里。

Tree viewer vs Formatter vs Validator —— 什么时候用哪个

你想……用
导航和探索大型或嵌套的 JSONTree viewer
得到干净、缩进好、可拷贝或提交的文本Formatter / pretty-printer
确认 JSON 语法合法并找出错误Validator
看两份文档之间改了什么Diff 工具

这几个会重叠 —— 多数现代工具既格式化 也 渲染树 —— 但选哪一个的关键问题是：你需要 可拷贝的输出（formatter）还是 可探索的结构（viewer）。完整对比见 JSON Viewer vs JSON Formatter。

在查看之前先处理掉坏 JSON

tree viewer 需要合法 JSON 才能搭起树 —— 解析不了的结构也没法渲染。如果你的输入里有尾随逗号、单引号或者不带引号的 key（手工编辑的配置或 LLM 输出里常见），先修。一个好 viewer 会在渲染前自动修复常见错误；否则用 JSON Fix 清洗，或者用 validator 查精确错误。底层规则见 什么是 JSON？

常见问题

什么是可折叠的 JSON 树？

一个把 JSON 渲染成可展开节点层级而不是扁平文本的视图。每个对象和数组都能折叠成一行摘要，也能展开露出子节点，让你在大文档里导航而不用滚遍一切。

JSON tree viewer 和 formatter 有什么区别？

formatter 输出干净的、缩进好的 文本 让你拷贝；tree viewer 渲染一个可点击穿越的可交互 结构。要输出用 formatter，要探索用 viewer。见 完整对比。

我能逐个折叠和展开节点吗？

能 —— 点任何对象或数组都能切换它，还能用「collapse all」/「expand all」重置整个视图。折叠节点会显示隐藏 key 或元素的数量。

我的 JSON 非法怎么办？

树只能从可解析的 JSON 上搭起。先用 JSON Fix 修常见错误，或者用 JSON validator 找出精确问题，然后再看清洗过的结果。

把你的 JSON 当成树来探索

把任何 JSON 贴到 fixjson 的 JSON Viewer，它会即时渲染一棵可折叠的树 —— 任意节点都能展开/折叠，能看到元素计数，能在大型嵌套 payload 里导航。它会在渲染前修复坏掉的 JSON，所有都在你的浏览器里跑，不会上传任何东西。