JSON 树视图与可视化导航

一、折叠展开：先看骨架，再看细节

树把每个节点渲染成一行，对象、数组、字符串、数字、布尔、null 分色显示。容器节点右侧直接标出规模： 对象显示「N 个键」、数组显示「N 项」，折叠状态下也能看出结构规模。三种操作方式：

• 点节点前的箭头，单独折叠 / 展开一个容器。
• 顶部「全部展开 / 全部折叠」，统一切换。
• 大文件建议先搜索目标字段（会自动展开祖先链），比盲目「全部展开」几十万行快得多。

二、键值搜索：自动展开祖先并跳转

在搜索框输入键名或值的片段（不区分大小写），工具会扫描全树，列出命中并 自动展开整条祖先链，用 ↑ / ↓ 在命中间逐个跳转，匹配子串高亮。

• 搜索同时匹配键名和值文本：输入 http 既能命中键名 url，也能命中所有链接值。
• 结果上限 500 条并明确提示，防止大文件里广撒网搜索拖慢交互。
• 清空搜索即恢复原展开状态，不破坏你之前的手工折叠。

三、JSONPath 面包屑：精确定位并可复用

选中任意节点，顶部即显示从根到该节点的 JSONPath 面包屑，形如 $ → items → [12] → id。 点其中任意一级可跳回祖先节点；点击复制得到完整路径 $.items[12].id。

这个路径是跨语言的取值表达式，可直接粘到 JSONPath 查询 工具做批量取值，或写进代码定位字段。注意数组下标从 0 开始， $.items[0] 才是第一项；键名含特殊字符时用方括号引号形式。

四、行内编辑：双向同步回文本

基本类型（字符串 / 数字 / 布尔 / null）支持在树里直接改：双击进入编辑，Enter 提交、Esc 取消。 提交后由 Worker 按「路径 + 新值」改写并重新序列化，文本区同步更新；反向在文本区修改，树也会重建。

• 非法输入会原地报错且不生效，例如数字字段填了非数字文本。
• 行内编辑只支持基本类型叶子；增删字段或调整数组结构请在文本区直接改。
• 字符串节点输入框里填的就是新值本身，无需再套引号，工具会正确处理转义。

五、十万节点为什么还流畅

关键在「窗口化」。解析与建树在 Web Worker 中完成后，主线程并不拿到全部行，而是按视口分页拉取：滚动时只请求可视区附近的行页， 滚出视口的行被回收。于是 DOM 节点数与文件总大小无关，12 万节点全部展开也能顺畅滚动。 文件超过 5MB 时，文本区会自动切换为大文件只读分片视图，树的浏览、搜索、复制能力照常可用。

需要按路径做查询 / 过滤而不是逐节点看时，请转用 JSONPath 或 jq 在线工具， 它们擅长对整份数据做表达式查询。

六、常见错误

• 一上来就全部展开。超大文件会展开出海量行，先搜索目标字段更高效。
• 以 1 为数组起点。JSONPath 下标从 0 开始，第一项是 [0]。
• 键名带特殊字符时写点号路径。含 -、空格等应使用 $["a-b"] 形式。
• 在树里想删字段 / 改结构。行内编辑只改叶子值；结构性修改请在文本编辑器完成。
• 以为数据被上传。解析、搜索、改写全在本机 Worker 执行，本地文件只经浏览器 File API 在内存读取。