打开浏览器开发者工具，网页切到 Network 面板，调试刷新页面。网页一堆请求里找到那个返回 JSON 的调试接口，点开 Response 标签——然后你看到一坨挤在一起的网页长字符串，键值对全糊成一团。调试这不是网页调试，这是调试受刑。

浏览器原生显示的网页 JSON 就是这德行。Chrome 和 Firefox 确实提供了 Pretty-print 选项，调试勾一下能格式化，网页但也就仅此而已。调试想折叠某个节点？网页做不到。想搜索特定字段？调试只能 Ctrl+F 碰运气。想对比两次请求的网页差异？自求多福。

所以我养成了一个习惯：把 JSON 复制出来，丢进独立工具里看。早些年用 JSONView 这类浏览器扩展，后来发现扩展的渲染性能有限，遇到几百 KB 的响应就开始卡。再后来转战在线工具，比如 JSONLint、JSON Formatter 这些网站，粘贴进去自动格式化，还能校验语法。但问题又来了——有些接口返回的数据带敏感信息，粘贴到第三方网站总归不太踏实。

本地工具才是最终归宿。VS Code 直接粘贴 JSON 然后 Shift+Alt+F 格式化，够用。但如果你要反复调试同一个接口，每次都复制粘贴太蠢。我现在的做法是写个简单的 Node 脚本，用 fetch 拉数据，JSON.stringify(obj, null, 2) 输出到文件，再用 VS Code 打开。整个流程不到十行代码，但省下来的时间很可观。

说到 JSON.stringify 的第三个参数，这是很多人忽略的一个点。传个数字进去就是缩进空格数，传字符串就是自定义缩进符。更骚的是第二个参数——replacer。你可以传一个函数，在序列化过程中过滤或转换字段。调试的时候我经常用它来剔除那些巨大的 base64 图片字段，不然输出文件动辄几十兆，编辑器直接罢工。

JSON.stringify(data, (key, value) => {  if (key === 'avatar_base64') return '[omitted]'; return value; }, 2);

浏览器端调试还有个冷门技巧：console.table()。如果 JSON 是个数组，每个元素结构相同，用 console.table 打出来比展开对象树直观得多。列头就是字段名，行就是数据，一眼扫过去清清楚楚。不过它只适合扁平结构，嵌套深了还是得靠 console.log(JSON.stringify(obj, null, 2)) 这招万能解法。

接口返回的 JSON 有时候不是标准格式。比如后端拼字符串拼出了尾逗号，或者用了单引号，或者 key 没加引号。浏览器里直接 JSON.parse 会抛异常，但你又想看看里面到底有什么。这时候 JSON5 或者 relaxed-json 这类库就派上用场了，它们能解析宽松语法的 JSON。装一个在本地，写个命令行工具，把不规范的内容转成标准 JSON 再看。

还有一个场景我遇到挺多次：接口返回的 JSON 字段名是动态的，比如用时间戳当 key。这种结构在编辑器里折叠展开很痛苦，因为每次 key 都不一样。我的处理方式是先用脚本把动态 key 归一化，比如全转成 item_1、item_2，格式化看完结构之后再对照原始数据。听起来绕，但比在几千行里人肉找规律强。

调试 JSON 这件事，工具链的顺手程度直接决定效率。别凑合，花半小时搭一套自己用着舒服的流程，后面能省出几十个小时。我现在是 VS Code + 一个自写的 fetch 脚本 + JSON5 解析库，基本覆盖了日常所有场景。偶尔遇到超大文件，就上 jq 命令行，jq '.' file.json 格式化，jq '.[0].name' 直接取字段，比开编辑器还快。

工具没有银弹，关键是知道自己面对的是什么形状的数据，然后选最趁手的那把刀。