先说几个核心判断：Chrome Network面板里看见的JSON乱码、挤成一团，根子都在响应头那几个字段上。弄明白这个，后面的事儿都好说。

打开开发者工具，切到Network，点你关心的那个请求，然后看Headers标签页。在Response Headers里面找Content-Type——这一步决定了Chrome能不能自动帮你把JSON整得漂漂亮亮的。

如果显示的是 application/json 并且带上了 charset=utf-8，那基本稳了。Preview标签页会自动把JSON格式化成可折叠的树状结构。

如果Content-Type缺了charset，或者干脆写的是text/plain、text/html，那Preview就只能显示原始文本。你想折叠展开？没戏。

更常见的情况是，charset写成了gbk或者gb2312，甚至压根没写——这时候中文必然变方块或乱码。这个锅浏览器不背，得后端在响应头里明确写上 Content-Type: application/json; charset=utf-8。前端这边改不了什么。

Content-Type不对时，Console手动格式化是救命稻草

遇到Content-Type不对，但响应体本身确实是合法JSON的情况，或者你手头已经有一坨原始JSON文本想整理，可以直接在Console里处理。

方法一：一键式操作

• 在Console里敲入 JSON.stringify(JSON.parse(`你的JSON字符串`), null, 2)，回车。
• 注意：字符串要用反引号包着，里面的双引号如果冲突，就换成单引号。

方法二：稳妥的分步操作

• 先执行 const raw = `你的JSON字符串`;，
• 再执行 console.log(JSON.stringify(JSON.parse(raw), null, 2));。
• 这样能避开首尾换行、不可见字符这类坑，不会一上来就给你报个SyntaxError。

需要说明的是：就算原始JSON里全是用Unicode转义（比如 u4f60u597d 表示"你好"），这招也能正常还原，不用额外做什么解码。

装个JSON Viewer扩展，一劳永逸

第三方扩展能绕过Content-Type的限制，自动尝试解析响应体内容。然后给你上色高亮、支持节点折叠，还附带主题切换。说白了就是接管了Preview的渲染逻辑，装上之后你会发现世界都清爽了。

操作不复杂：去Chrome网上应用店搜“JSON Viewer Pro”或“JSON Formatter”。挑那种近一年有更新、权限只声明“读取网页数据”的装。

点“添加至Chrome”，确认就行，不用重启浏览器。装完后刷新Network面板，再触发你的请求。这时候Preview标签页会自动变成树状结构，箭头点一下就能展开或者折叠对象和数组。

有的扩展在Preview顶部还会给个“Raw”和“Formatted”切换按钮。默认没生效的话点一下Formatted就能强制重绘。

中文变方块？两个方向查

方法1：安装“Chrome-Charset”扩展，装上后点地址栏右边的小图标，选UTF-8。这个操作只影响当前页面的文本解码方式，不影响JSON结构，但能让Preview里的中文字符正确显示。

方法2（最关键的一点）：检查后端是不是漏了响应头。服务端如果返回了 application/json 但没带 charset=utf-8，浏览器可能按系统默认编码（比如Windows-1252）去解析字节流，中文不变成方块才怪。

解决办法只有一个：后端必须在HTTP响应头里显式设置 Content-Type: application/json; charset=utf-8。前端这边再怎么折腾也补不上这个窟窿。

《夸克》非常好用的免费AI浏览器

下载APP查看