无需登录 数据私有 本地保存

JSON 结构树浏览器 - 交互展开与路径复制

12
0
0
0
JSON 结构树浏览器
交互展开 · 路径复制 · 类型识别
输入 JSON 并点击解析，树结构将显示在这里
-
总节点数
-
最大深度
-
叶子节点
-
JSON 大小
常见问题

它帮助开发者直观地查看和理解复杂 JSON 数据的层级结构。你可以逐层展开/折叠节点，快速定位到感兴趣的数据字段，并一键复制该字段的完整访问路径（JSONPath 或 JS Path），极大提升调试 API 响应、分析配置文件或处理大型 JSON 数据的效率。

JSONPath（如 $.store.books[0].title）以 $ 开头表示根节点，是 RFC 9535 标准格式，广泛用于 API 测试工具（如 Postman）和数据处理框架。JS Path（如 store.books[0].title）省略了 $ 前缀，可直接用于 JavaScript 的 eval() 或 lodash 的 _.get() 方法。两种格式在工具中可一键切换。

如果 JSON 属性名包含空格、点号、方括号或其他特殊字符，本工具会自动使用方括号+引号包裹，例如 ["prop.name"] 或 ['data key']，确保生成的路径在 JavaScript 和 JSONPath 中都能正确解析。这是许多同类工具容易忽略的细节。

本工具在浏览器本地运行，可处理大多数日常场景的 JSON 数据（数千个节点）。对于超过 10MB 的超大 JSON 文件，建议使用专业工具（如 jq、JSON Hero）或先进行分片处理。工具会自动检测 JSON 有效性，并在解析失败时给出具体错误位置提示。

在搜索框中输入关键词后，工具会遍历所有节点的 key 名称和 value 值进行模糊匹配。匹配到的节点会以黄色高亮标记，并且从根节点到匹配节点的路径会自动展开，方便你快速定位。搜索支持不区分大小写的匹配，并实时显示匹配数量。

可以。JS Path 格式生成的路径可以直接用于 lodash 的 _.get(obj, 'store.books[0].title') 或原生 JavaScript（需注意特殊字符属性）。JSONPath 格式则兼容 Postman、JMESPath 等工具。复制路径后可直接粘贴到你的代码或 API 测试工具中使用。
🔧 相关工具