用华为云 AI 开发者空间做一个 JSON 本地工具：从需求到作品馆

日常调试接口时，JSON 往往一会儿要看缩进，一会儿要压成单行，还要确认两个版本到底改了哪里。临时网页工具虽然多，但把业务数据粘贴到陌生网站总让人犹豫。我用华为云 AI 开发者空间和 CodeArts 做了一个单文件的「JSON 口袋工具箱」，重点放在轻量、直观和本地处理，再把成品发布到作品馆供人体验。

先把边界定清楚

工具只用 HTML、CSS 和原生 JavaScript，没有构建步骤、外部依赖、CDN 或统计代码。打开 index.html 就能使用。格式化和压缩都通过浏览器内置的 JSON.parse、JSON.stringify 完成；页面不需要后端接口，也不会把输入内容发送到服务器。对临时查看配置、请求响应或脱敏后的样例，这种结构省去了部署和账号配置，也让数据流向更容易理解。

格式化会按两个空格缩进输出，压缩则去掉多余空白。输入框有实时语法校验，界面同时展示输入、输出的 UTF-8 字节数和递归统计的对象键数量。结果还可以复制或下载成 output.json。一个顺手的流程是先载入示例熟悉界面，再粘贴待处理内容，校验通过后选择格式化或压缩；比较时分别贴入两个版本，查看路径和差异类型。错误提示尽量保留浏览器给出的解析信息；不同浏览器的行列提示可能略有差异，因此它适合快速定位，不替代编辑器诊断。

比较时看数据结构，而不是文本排版

文本逐字符比较很容易把缩进和键顺序当成变化。工具解析两份 JSON 后递归比较：对象按键和值匹配，忽略键的排列；数组则按位置比较，顺序有意义。例如下面两份对象结果相同：

{"user":{"name":"Lin","active":true},"tags":["api","test"]}

{"tags":["api","test"],"user":{"active":true,"name":"Lin"}}

但把数组改成 ["test","api"] 就会产生位置差异。界面会用路径指出新增、删除、值变化或类型变化，例如 $.user.name，数组元素则显示为 $[0]。这适用于检查配置版本或接口样例；它不是业务语义推理，例如不会判断两个不同字段是否代表同一概念。

比较实现里有一个容易忽略的边界：特殊键名。若用普通对象记录“见过哪些键”，__proto__ 可能触发原型相关行为，constructor 等名字也不应被当成普通状态标记。这里用 Object.create(null) 创建无原型的键集合，并通过 Object.prototype.hasOwnProperty.call 判断输入对象是否确实包含某键。差异路径对普通标识符使用点号，对带空格、符号等特殊名称使用方括号和 JSON 字符串转义，避免路径含义含混。用户输入只通过文本和值属性展示，没有作为 HTML 插入。

使用和数据限制

最简单的方式是下载源码后双击 index.html。也可在目录运行：

python3 -m http.server 8000 --bind 127.0.0.1

再打开 http://localhost:8000。页面处理发生在浏览器中，但这不等于所有数据都适合粘贴：请仍按组织的数据管理要求操作。工具使用 JavaScript 的 Number 解析数字，超过 2^53-1 的整数可能丢失精度；需要原样保存时，应把它作为字符串传递，例如 {"id":"9007199254740993"}。重复对象键也有边界：JSON.parse 通常只保留最后一个值，不会提示重复。数十 MB 的文件或很深的嵌套结构还可能令浏览器变慢或触发递归深度限制。

这个项目采用 AI 协作开发：由 CodeArts 生成初稿，结合源码检查修复边界问题，并在浏览器中验证了格式化、压缩、校验和比较交互。成品已发布到华为云开发者作品展览馆，作品名为“JSON 口袋工具箱”。复用时建议先用脱敏样例验证结果，再根据自己的使用场景扩展。