json格式化需用json.stringify(obj, null, 2)配合转义输出，结合实现折叠，辅以等宽字体、white-space和overflow-x等css控制可读性。
HTML 和 JSON 格式本身没有直接关系，但你在 HTML 页面中展示、调试或编辑 JSON 数据时，必须依赖工具或代码对 JSON 做格式化（indent + line break）和语法高亮，否则它就是一整行不可读的字符串。
JSON.stringify(obj, null, 2) 是最轻量的格式化方式
浏览器原生支持，无需引入任何库。但注意：它只做缩进，不带颜色、不支持折叠、不能处理非法 JSON 字符串。
-
JSON.stringify第三个参数是缩进空格数，2或4最常用；设为0或""会退化为紧凑格式 - 如果输入不是对象/数组（比如
undefined、函数、循环引用），会静默忽略对应字段或抛出TypeError - 它输出的是纯字符串，要插入 HTML 需手动用
<pre class="brush:php;toolbar:false;"><code></code> 包裹，并确保 <code> <code>></code> <code>&</code> 被转义，否则有 XSS 风险</code></pre>
用 <details><summary></summary></details> 实现点击展开/收起 JSON
这是 HTML5 原生支持的折叠方案，零 JS、语义清晰、无障碍友好。但它不改变 JSON 字符串本身，只是控制显示区域的展开状态。
- 必须把格式化后的 JSON 放在
<details></details>内部，否则折叠后看不到内容 -
<summary></summary>里建议写明数据长度或类型，比如"response (12.4 KB)"，避免用户点开才发现是空对象 - 部分旧版 Safari 对嵌套
<details></details>渲染异常，如需兼容 IE/Edge 17-，得降级为 JS 控制display
JS Beautifier 不适合直接在生产环境格式化用户提交的 JSON
它功能强（支持缩进、换行、引号控制、括号对齐），但设计初衷是开发期代码美化，不是运行时安全解析器。
- 传入非法 JSON（如单引号、尾逗号、注释）会直接报错，而
JSON.parse()也会——但你得自己捕获并提示用户 - 它默认不校验输入，若用户粘贴了含恶意脚本的字符串（比如
"key": "<script>alert(1)</script>"），再塞进innerHTML就执行了 - 体积较大（minified 约 150KB），若只为了 JSON 格式化，用
JSON.stringify+ 简单着色更轻量
真正影响可读性的不是“工具”，而是 HTML 渲染上下文
即使用了最炫的高亮库，如果父容器 font-size 过小、line-height 过紧、没设 white-space: pre-wrap，JSON 依然挤成一团。
- 必须给包裹容器设置
font-family: ui-monospace, SFMono-Regular, 'Segoe UI Mono', ...，否则等宽失效 -
pre标签默认不换行长键名，加word-break: break-all可缓解 - 深嵌套 JSON 在移动端容易横向溢出，建议外层加
overflow-x: auto并禁用-webkit-overflow-scrolling: touch防卡顿
别迷信“美化工具”的名字，关键看它是否在你的渲染链路里真正可控：能不能拦截错误、能不能适配响应式、能不能防止注入。很多时候，几行手工写的 JSON.stringify + <details></details> + CSS 微调，比集成一个重型库更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
