QuackJSON

为什么做这个

调试接口的时候，经常需要把后端返回的一坨压缩 JSON 格式化看一眼，或者对比两次返回结果有什么区别。网上的在线工具不少，但大多数要把数据传到服务器——对于内部接口、敏感数据，这是个隐患。

所以做了一个纯前端、零依赖、可以离线使用的版本，所有处理都在浏览器本地完成。

做了什么

• 格式化 / 压缩 — 一键美化或压缩 JSON，支持自定义缩进
• 结构对比 — 双栏 diff 视图，高亮新增、删除、修改的字段
• 路径提取 — 点击任意字段，自动生成 JSONPath
• 大文件支持 — 基于 Web Worker，10MB 文件也不卡主线程
• PWA 离线可用 — 添加到主屏幕后断网也能正常打开

怎么搭的

没有用任何前端框架，纯 Vanilla JS + Web Components 实现 UI，构建工具用 Vite。JSON 解析和 diff 算法跑在 Web Worker 里，避免大文件阻塞界面渲染。通过 Service Worker 实现 PWA 离线缓存。

长什么样

做完之后想到的

这是我做过用户量不大但口碑最好的项目之一——没有花哨的功能，只是把一件小事做到位：快、安全、随时可用。

开源之后收到不少 issue 和 PR，最受欢迎的反而是"暗色模式"和"快捷键支持"这种细节，再次验证了体验细节的重要性。