JSON 树形视图

什么是 JSON 树形查看器？#

JSON 树形查看器把一份 JSON 文档解析出来，画成一个可以折叠的大纲，就像文件管理器展示目录树那样。你不用再去盯着一长串缩进文本、靠数花括号来猜谁套在谁里面——结构一眼可见：对象和数组是可以点开/收起的分支，叶子值（字符串、数字、布尔、null）就挂在末端。

文档越深、越陌生，这事儿越重要。一个 API 响应轻松就能写上百行；一份配置文件里的设置可能套了四五层，名字还长得差不多。用扁平的格式化器，你一滚屏就丢了上下文；用树形视图，把用不上的分支全收起来，只留你关心的那一支，其余的不再抢注意力。

本页在浏览器里解析你的 JSON，逐节点渲染成可折叠的树，并且只用纯文本写入内容、不把输入当 HTML 解释——所以即便文档里含 <script> 标签或长得像 HTML 的字符串，也只会被当成文字显示，不会被执行。

怎么使用#

1. 把 JSON 粘到左侧 输入 框，边输入边解析。
2. 树会出现在右侧。每个对象或数组会显示一个 ▼ 折叠按钮、左括号（{ 或 [）、内部条目数，以及右括号。点这个按钮——或者点括号本身——就能展开/收起这一支。
3. 用 全部展开（Expand all）把每个分支一路开到叶子；用 全部折叠（Collapse all）把整份文档缩回只剩根节点。折叠是你在一堆冗长 payload 里先拿到一行总览、再决定往哪钻的方法。
4. 右侧标题栏会显示根节点顶层条目数（比如 5 items），让你一眼看出这份文档有多大。
5. 点 示例（Sample）载入一份带嵌套的演示文档；点 清空（Clear）清空两边。

主要特性#

• 每个分支独立折叠。 每个容器各自开合，你可以让某个子对象一直展开做参照，其余全部收起。
• 层级引导线。 子节点缩进在一条竖向引导线下方，即便文档很密，也能一眼看清某个条目属于哪对括号。
• XSS 安全渲染。 每个标签和值都作为纯文本写入——输入绝不当作 HTML 解析。看起来带恶意的字符串只会以文字形式显示。
• 忠实的叶子值。 字符串保留外层引号，数字严格按 JSON.stringify 的写法呈现，所以 true（布尔）和 "true"（字符串）一眼分得清。
• 实时计数。 标题栏显示根节点持有的条目数，随编辑实时更新。

实例演示#

点 示例，解析出来的树显示一个含五个顶层条目的根对象：

▼ { 5
    "name": "ArpGate DevTools"
    "version": 1
    "active": true
  ▼ "tags": [ 3 ]
  ▼ "features": { 2 }

这五个条目里有两个本身就是容器。展开 tags，能看到一个三元素数组（"json"、"encoding"、"crypto"）；展开 features，能看到 static 是 true、而 backend 是 null——树形视图把这个区别明明白白地画出来，而不是让你对着扁平 dump 去猜。

如果你只关心 features 这个子对象，把顶层其余的 ▼ 都点收起来就好。根上那个 5 的计数依然准确，引导线也让你看清 static 和 backend 是挂在 features 下面、而不是挂在根上。

常见问题#

这个工具会修改或重新格式化我的 JSON 吗？#

不会。树是解析值的只读视图。你的输入文本不会被重写、不会被重新缩进、也不会被输出。如果你想把文档以文本形式美化输出，请用格式化器；本工具是用来导航的，不是用来规整文本的。

为什么树里的字符串还带着引号？#

因为 JSON 本身就是靠引号来区分字符串和裸关键字的。去掉引号，true 和 "true" 看起来就一模一样，null 和字符串 "null" 也分不开。保留引号（和 JSON.stringify 的产出完全一致）是为了让这种区别一眼可见。

遇到特别大的文档会怎样？#

解析和渲染全在你浏览器里完成，不上传、不与服务端往返。常见的配置和 API 响应都是瞬间完成。但如果是几 MB 的大文档，树要为每个值都建一个节点，可能会卡——把用不上的分支收起来，让可见节点数保持在可控范围。

含 HTML 的字符串会被当成 HTML 渲染吗？#

绝不会。工具把每个值都作为纯文本写入，浏览器会把它当成无活性字符。一段恰好含 <script> 或 <img onerror=...> 的字符串，只会原样以文字显示——它不会被当作标记解析，也不会执行。