JSON 树视图
JSON 树视图工具，把 JSON 文本渲染成可折叠的层级树，对象、数组、字符串、数字、布尔、null 分色显示，容器节点直接标出「N 个键 / N 项」。支持手动折叠展开、全部展开 / 全部折叠、键名与值的实时搜索（自动展开祖先、上下跳转）、JSONPath 路径面包屑、节点值与路径复制，以及基本类型值的行内编辑并同步回文本。树与编辑器联动，解析都在 Web Worker 中完成；十万级节点采用窗口化渲染，滚动时只加载可视行，数据全程留在浏览器里。
怎么使用
- 1
粘贴或打开 JSON
右侧树在输入停顿后自动生成，也可点「打开文件」载入本地 .json；语法错误时左侧编辑器行内高亮，树保持上一份合法状态。
- 2
折叠展开浏览层级
点节点箭头单独折叠 / 展开，或用顶部「全部展开 / 全部折叠」统一切换；容器右侧显示子项数量，方便判断结构规模。
- 3
搜索并跳转
在搜索框输入键名或值片段（不区分大小写），自动列出命中并展开其祖先链，用 ↑ / ↓ 在命中间逐个跳转，匹配子串高亮。
- 4
看路径、复制、改值
点节点后顶部出现 JSONPath 面包屑（可逐祖上溯），悬停可复制值或完整路径；字符串、数字、布尔等叶子值支持行内编辑，回车提交即同步回编辑器。
功能特点
类型分色与容器摘要
字符串、数字、布尔、null 各有语法色；对象显示「N 个键」、数组显示「N 项」，折叠状态下也能掌握结构规模。
键值搜索带祖先展开
不区分大小写的子串匹配，命中后自动展开整条祖先链，深层字段不用逐层手工翻开；结果上限 500 条并明确提示。
JSONPath 面包屑
选中节点即显示 $ → items → [12] → id 形式的路径，点击任意一级可跳到祖先节点，复制路径可直接用于 JSONPath 查询或代码取值。
行内编辑双向同步
叶子值直接在树里改（Enter 提交 / Esc 取消），经 Worker 按路径改写并序列化回编辑器；反向编辑文本树也会重建。
十万节点窗口化
Worker 侧只回传统计量，行数据按页拉取、视口外自动回收，12 万节点滚动依旧流畅，内存不随文件膨胀。
本地打开文件
本地 .json 文件直接打开，敏感结构不出设备。
常见错误与排查
- ! 超大文件不建议一上来「全部展开」：先搜索目标字段（会自动展开祖先链），比盲目展开几十万行快得多。
- ! JSONPath 中数组下标从 0 开始，$.items[0] 是第一项；对象键含特殊字符时用方括号引号形式 '$["a-b"]'。
- ! 行内编辑只支持基本类型（字符串 / 数字 / 布尔 / null）；增删字段或调整数组结构请直接在编辑器中修改文本。
- ! 搜索同时匹配键名和值文本，例如输入 http 可以同时命中键名 url 和所有链接值；清空搜索即恢复原展开状态。
常见问题
JSON 树视图和大文件 JSON 查看器是同一个工具吗？
共用同一个工作台，侧重点不同：树视图强调结构化浏览与操作（折叠、搜索、JSONPath、行内编辑）；当文件超过 5MB 时，文本区会自动切换为大文件只读分片视图以保证流畅，而树浏览、搜索、复制等能力不受影响，可理解为同一工具的两种浏览形态。
多大的 JSON 可以用树视图打开？卡吗？
没有人为上限。解析在 Web Worker 中完成，树采用会话化窗口协议：主线程只保留可视区附近的行页，DOM 节点数与文件总大小无关。实测 12 万节点全部展开后滚动、搜索跳转依然流畅。
在树里改值会改坏原数据吗？
不会。行内编辑把「路径 + 新值」交给 Worker 做按路径改写并重新序列化，非法输入（如数字字段填了文本）会在原地提示错误且不会生效；成功后左侧编辑器同步更新，可随时复制或撤销（继续编辑文本）。
复制的 JSONPath 有什么用？
JSONPath 是跨语言的 JSON 取值表达式（类似 XPath 之于 XML），复制出的 $.items[12].id 可直接粘到本站的 JSONPath 查询工具做批量取值，也可写进 JavaScript（简单点路径）、Python、Java 等代码中定位字段，省去手工数层级。
数据会上传吗？
不会。树解析、搜索、路径改写都在本机执行。打开的本地文件通过浏览器 File API 在内存中读取，不会上传。