关键词：JSON格式化工具、JSON美化、JSON在线解析、JSON校验、前端开发工具、纯HTML工具、无广告工具

很多开发同学每天都在做同一件事：粘贴 JSON → 格式化 → 看层级结构。
但现实很扎心：

• 在线工具广告太多，操作体验很割裂；
• 装客户端工具太重，启动慢、占资源；
• 真正只想“快速格式化”的需求，反而被复杂功能淹没。

为什么我决定自己做一个？

我是做接口联调和数据排查时，经常被 JSON 工具“反向教育”的人：
打开工具先看广告、找输入框、点半天按钮，效率直接被拉垮。

所以我给自己定了 3 条铁律：

1. 只做 JSON 格式化核心需求；
2. 页面尽量纯净、布局尽量利用屏幕；
3. 必须单文件，拷到哪都能用。

这个工具能做什么？

• ✅ 左侧粘贴 JSON，右侧实时格式化
• ✅ 右侧支持对象/数组逐层折叠与展开
• ✅ 支持全部折叠 / 全部展开
• ✅ 支持压缩 JSON（一键去空格）
• ✅ 支持复制结果
• ✅ JSON 非法时显示清晰错误提示
• ✅ 纯前端：HTML + CSS + JS，离线可用

工具截图（效果预览）

设计思路（核心）

1）输入即反馈：让“格式化”变成零成本动作

监听输入框 input 事件，用户一粘贴就自动解析；
成功就渲染树，失败就报错，不打断输入流程。

2）树形渲染：大 JSON 也能快速看重点

不是简单 pre 文本，而是递归渲染的节点树。
你可以折叠无关层级，只关注当前字段，大型响应体也能快速定位。

3）布局优先：尽可能利用屏幕

页面使用双栏布局，减少左右与底部留白，让“有效内容区”最大化。
尤其在宽屏开发环境下，体验比传统居中窄布局舒服很多。

关键代码逻辑（简版）

1）JSON 解析与格式化

function formatJson() {
  const json = JSON.parse(inputEl.value);
  currentCopyText = JSON.stringify(json, null, 2);
  renderTree(json);
}

2）递归渲染 JSON 节点

function renderValue(value, depth, key, isLast) {
  const isContainer = value !== null && typeof value === "object";
  if (!isContainer) return createPrimitiveLine(value, depth, key, isLast);
  // 对象/数组：渲染头部、子节点、结尾
  // 子节点继续调用 renderValue(...)
}

3）折叠/展开控制

function setNodeCollapsed(nodeEl, collapsed) {
  nodeEl.classList.toggle("collapsed", collapsed);
}

4）全局折叠/展开

function toggleAll(expand) {
  const allNodes = outputEl.querySelectorAll(".json-node");
  allNodes.forEach((nodeEl) => setNodeCollapsed(nodeEl, !expand));
}

使用场景（真实高频）

• 接口联调：快速检查返回字段结构
• 日志排查：大对象按层折叠查看
• 前后端协作：统一 JSON 可读格式
• 学习调试：更直观看对象与数组嵌套关系

为什么推荐“纯 HTML 单文件”方案？

• 没有安装成本
• 没有环境依赖
• 没有平台限制（Windows/macOS/Linux 都能开）
• 没有广告干扰
• 可以直接内网分发给团队成员使用

对开发者来说，工具越“轻”，效率越“稳”。

下载链接

• 点击下载