JSON 树形查看器

工具介绍

JSON 树形查看器把 JSON 文档变成一个可导航的大纲：每个对象和数组都是可展开或折叠的节点，每个键都显示其推断出的类型，每个叶子值都直接内联展示。你不用滚动几千行文本，只需要深入你真正关心的那几个分支。

这和 JSON 格式化工具不同。格式化工具是给 JSON 文本重新排版加缩进，让它看起来更整洁——如果你只是需要美化、压缩或校验语法，那是更合适的工具。树形查看器是用来探索和浏览结构本身的，尤其适合 JSON 很大、嵌套很深，或者你还不知道所需数据藏在哪里的情况。如果你只是想美化或校验 JSON 文本，请使用 JSON 格式化工具。

为什么使用它？

• 浏览深层嵌套的接口返回值或配置文件，不会搞混哪个括号对应哪一层。
• 按键名或值搜索，直接跳转到匹配项，路径会自动帮你展开。
• 轻松处理体积很大的 JSON（几兆甚至更大）——子节点只在你展开时才会构建，不会让页面卡死。
• 一眼看清每个值的类型——字符串、数字、布尔值、null、对象或数组——标签清晰。
• 完全私密：解析和渲染全部在浏览器本地完成，数据不上传、不保存。

使用方法

1. 把 JSON 粘贴到输入框，或用文件选择器从本地加载一个 JSON 文件。
2. 点击"渲染树"生成可交互视图。
3. 点击任意对象或数组旁边的箭头展开或折叠——超过两三层的节点默认自动折叠，保证大文件依然流畅。
4. 在搜索框中输入键名或值来查找匹配项，工具会自动展开沿途的所有父节点，并滚动到结果处并高亮显示。
5. 使用上一个/下一个按钮在多个匹配项之间切换。

示例

输入

{"user":{"id":42,"name":"Ada","roles":["admin","editor"],"active":true,"manager":null}}

输出

user: { 4 个键 }
  id: 42（数字）
  name: "Ada"（字符串）
  roles: [ 2 项 ]
    0: "admin"
    1: "editor"
  active: true（布尔值）
  manager: null

每一行显示键名、推断出的类型，以及叶子节点的值或对象/数组折叠时的元素数量（展开后才会看到内容）。

实用技巧

• 面对巨大的接口返回值，先搜索一个特征字段名（比如某个 id 或错误码），而不是一层层手动展开——搜索会直接带你跳过去。
• 超过两三层的节点默认是折叠的，这是有意为之，让几兆大小的数据也能保持流畅；只展开你需要的那个分支。
• 类型标签（字符串、数字、布尔值、null、对象、数组）特别适合用来发现一个字段意外变成 null，或者本该是对象的地方变成了数组。
• 如果你只是想美化或校验一段 JSON 文本，而不是探索它的结构，用 JSON 格式化工具会更快。

真实工作流中的位置

深层嵌套的接口返回值、数据库导出和配置文件，作为一大段扁平文本很难看懂——你很容易分不清哪个右括号对应哪个键。把同样的数据加载进树形视图，就可以折叠掉所有不需要的部分，只专注于真正相关的那一支，这比在格式化后的大段文本里翻找某个字段快得多。

一个常见的流程是：先把一个大的 webhook 返回值粘贴到这里，弄清它的结构、找到你需要的字段，然后如果需要一份干净、带缩进的文本副本粘贴进 bug 报告或代码 review，再切换到 JSON 格式化工具。

→ JSON格式化

常见使用场景

• 在写代码之前，先在一个庞大、深层嵌套的接口返回值中找到某个具体字段的位置。
• 查看一个很大的配置文件或导出文件，不用滚动几千行原始文本。
• 在自己的代码里解析某个陌生的 JSON 之前，先检查它的结构和各字段类型。
• 在一份庞大的 JSON 文档中定位某个具体的值（一个 ID、一条错误信息、一个时间戳）。

常见问题