那天半夜，我把一份 10MB 的接口日志拖进某个在线工具，页面没崩，光标却一挪一挪地走。杯子在键盘边打滑，差点把咖啡扣进空格键里。更尴尬的是，我在数组末尾多打了一个逗号，工具只丢下一句“invalid JSON”，连第几行都不告诉我。折腾十分钟，我决定把脑子里那张“理想编辑器的清单”写下来，给正在做工具的人看，也给经常被 JSON 折磨的同事一个参照。
问题在哪里：读、改、找、转、比、稳
日常用 JSON，有六类动作最高频：能不能顺手地阅读和编辑；能不能精准地定位和查询；碰到大文件会不会卡；导入导出和格式转换是否省事；两份结果对比是否清楚；数据处理是否稳和安全。每类动作里，都有几个关键点，一旦缺一个，体验就会崩。
过程与做法：把细节抠到工具心里
1）编辑与校验，先把“写字的手感”打磨好
我希望敲下去就有语法高亮（根据类型着色的显示方式，便于分辨键名和数据类型）。字符串、数字、布尔值、空值、对象、数组要各自分色，缩进可选 2 空格、4 空格或 Tab。
输入过程中要有实时校验（输入时立即解析并提示错误，而不是保存后才报错），精确到行列号，最好给修复建议。校验可以做节流与去抖（Throttle/Debounce，控制高频触发次数的技巧），减少无意义的重复计算。
排版要支持 Pretty Print（把 JSON 按缩进与换行排版便于阅读）和 Minify（去空格与换行，便于复制与传输）两种模式。
模式上，我需要严格与宽松两套。严格模式遵循 RFC 8259 与 ECMA-404（两份 JSON 语法规范，一份来自 IETF，一份来自 ECMA）；宽松模式容忍尾逗号、单引号与注释。宽松可用 JSON5（带注释和尾逗号等扩展的非标准方言，适合宽松阅读，不适合严肃数据交换）。
小错误可以交给错误自动修复向导（把少引号、多逗号一类小错自动更正），修之前弹出 Diff 预览（比较两个版本差异的视图），我点确认再应用。
有时我只想整理一块内容，就用局部格式化（只格式化选中区域，避免全局改动）。
经常输入重复结构，可以靠片段模板与补全（Snippet，可复用的文本片段，输入缩写自动展开）节省时间。
小场景一：群里丢来一段堆栈附带的 JSON，我粘贴进来，宽松模式先吃掉注释，自动修掉两个尾逗号，Diff 里绿色一大片，我心里有底了。
2）结构浏览与查询，让“找东西”像开文件夹一样自然
长 JSON 不该一坨。需要树形视图（把对象和数组展示成可展开的层级结构，像资源管理器），支持一键展开到指定深度，节点上能复制当前 JSON、路径和键名。
定位可以配JSONPath 查询（用路径表达式定位节点，像文件路径的查询语法）。写 $.items[?(@.price>100)]，高亮出所有昂贵条目，并能把结果导出。
查找替换要靠谱。支持只搜键名、只搜值和正则（一种基于模式的字符串匹配语法），替换之前给预览列表，我逐条确认不慌。
对比结构时，键排序与去重能把两份差不多的 JSON 排齐，重复字段清理干净，再看差异就很清楚。
小场景二：我搜 userId=321，结果有 17 处。树上点到 orders[3421]，路径一键复制给同事，远程语音那头安静了。
3）大文件性能，把“卡顿”挡在技术堆栈里
大体量是线上常态。列表与树需要虚拟列表渲染（Virtualized List，只渲染可见区域的节点，滚动时动态更新），十万级节点滚动也稳。
解析要做增量解析（Streaming Parser，边读边解析，不一次性把整份文本塞进内存），浏览器端配合 File 切片逐块解码，降低内存峰值。
重活交给Web Worker（浏览器的后台线程，用来搬运重计算，避免界面卡住），解析、压缩与 Diff 都放后台，主线程专心交互。
再进一步，上 WASM（WebAssembly，把高性能语言编译后的模块放进浏览器执行），超大 JSON 的解析与 Diff 计算会更快。
长任务要有进度与取消，我看到进度条心里有数，点“取消”能回收内存，不用等浏览器给我无响应。
4）导入导出与格式转换，把“连接外部世界”的门槛降到最低
导入支持粘贴、拖拽文件、选择本地文件和 URL 拉取。URL 拉取时，明确跨域策略和隐私边界，省得误会。
导出要给 .json、.txt 和片段复制，也能只导出选中节点。
转换要齐：JSON 与 YAML（以缩进表达层级的文本数据格式，可读性强）、CSV/Excel（逗号分隔的表格文本或表格文件）、XML 互转。
顺手再加代码示例生成。一键生成 curl、fetch、Axios、Java 与 Go 的请求示例，我贴到接口文档里就能跑。
5）对比、合并与协作，让多人协同少吵架
对比用结构化 Diff/Merge（对比两份 JSON 的键与值差异，可按键合并），字符串内部再配字符级视图，细节一目了然。
约束用JSON Schema 校验（Schema 是“结构与约束的说明书”，能在字段级给出错误定位），支持外部 Schema 引用与 $ref（在 Schema 中引用其他定义的机制）解析，报错用人话提示。
版本保存需要变更历史与版本切换，本地优先，误删可回滚。
多人编辑时，可以启用 CRDT 或 OT（两种常见的冲突合并算法，用于多人同时编辑时自动合并改动），协同不抢锁。
6）安全与隐私，把风险写在默认里
默认本地处理（不上传数据到服务器，所有操作在浏览器里完成），确需上传时，展示留存策略并给删除按钮。
分享只做受限分享（生成临时链接，设置过期时间与只读权限）。
离线场景启用 PWA（可安装的网页应用形态，离线也能打开与使用），本地草稿随时可看。
做 URL 拉取时，先弹出域名与数据大小提醒，帮用户评估风险。
7）可用性与细节，把省下的每秒还给用户
常用操作配齐键盘快捷键（一组按键组合的快速指令），Mac 与 Windows 各用各的习惯。
无障碍要考虑：高对比度、字号可调、等宽字体选择，色盲模式准备好。
粘贴时做智能识别，如果是 JS 对象或 JSON5，给出一键转为标准 JSON 的选项。
失败提示要清楚且可复制，一键把错误信息发到群里，少描述多证据。
8）工程落地建议，把“可维护”种在架构里
解析层：严格模式走原生 JSON.parse，宽松模式接入宽松解析器；大文件构建增量解析管线，输出节点流（逐个产出已解析节点的序列，便于提前渲染）与错误流。
视图层：树视图用虚拟化与键路径缓存；每个节点分配稳定标识（不会随渲染次序改变的键，用来记住 UI 状态），展开状态不丢。
任务层：格式化、Diff、Schema 校验放 Web Worker，主线程通过消息通道（线程之间传递数据的通信机制）获取增量结果。
存储层：本地用 IndexedDB（浏览器内建的键值数据库，用于存储较大数据）保存草稿和历史；导入大文件采用分块写入（把大数据拆成小块逐步落盘的方式），降低内存峰值。
性能监测：关键路径埋点，记录解析耗时、首屏渲染耗时与内存峰值；界面留问题反馈入口。给出目标值，像 1MB 文本美化在 200ms 内完成，十万节点滚动保持 50fps 以上。
发现可落地的验收点：一张直接可用的检查单
我把常见的坑点收拢成九条，评测任何在线编辑器时都能用：
- 语法高亮、实时校验、Pretty 与 Minify、局部格式化是否齐。
- 树形视图是否能展开到指定深度，路径复制是否准确。
- JSONPath 查询是否正确，结果能否导出。
- 10MB 文件能否在不阻塞界面的前提下加载并展示首屏。
- Diff 与 Merge 是否支持键级合并与字符级对比。
- Schema 校验是否支持
$ref，错误信息是否直指字段与规则。 - 默认是否本地处理，上传与分享的权限和留存是否清晰可控。
- 快捷键、无障碍、历史版本、错误信息可复制等细节是否到位。
- 是否达到约定指标：200ms 美化、50fps 滚动、可取消的长任务与可见进度。
收尾
找了一大圈，发现目前在线JSON编辑器都有各种问题，于是我着手开发了一个，地址：在线JSON工具 - IT宅，功能完善中，有更好的改进建议的朋友可以关注公众号联系我，我将优先实现能帮助80%的人的功能，感谢您的阅读~
