如何修正谷歌浏览器控制台Network面板预览JSON数据格式错乱？

Chrome Network Preview中JSON乱码需先检查Response Headers的Content-Type是否为application/json; charset=utf-8，缺失则无法自动格式化；可手动用Console解析或安装JSON Viewer扩展强制渲染并配合Chrome-Charset切换编码。

当你在Chrome浏览器Network面板中点击某个请求的Preview标签页，看到JSON数据挤成密不透声的一长串、缩进全无、中文显示为乱码或方块，说明当前响应未被正确识别为结构化JSON，也未按UTF-8编码解析。

确认响应头是否声明JSON类型与UTF-8编码

这一步决定Chrome能否自动启用格式化渲染。打开开发者工具→Network→点击目标请求→切换到Headers标签页→在Response Headers区域查找Content-Type字段。

若值为 application/json 且包含 charset=utf-8（例如 application/json; charset=utf-8），则Chrome具备自动格式化前提；若缺失charset或类型是text/plain、text/html等，Preview将始终以原始文本呈现，无法折叠展开。

若发现Content-Type中charset被写成gbk、gb2312或完全缺失，需后端修正响应头。前端无法通过浏览器设置覆盖该判定逻辑。

用Console手动格式化任意JSON字符串

适用于Content-Type错误但响应体确实是合法JSON的情况，或你已复制出原始JSON文本。

方法一：直接粘贴解析

在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扩展强制接管Preview渲染

第三方扩展能绕过Content-Type限制，对响应体内容做主动JSON尝试解析，并提供彩色高亮、节点折叠、主题切换等增强功能。

第一步：访问 Chrome网上应用店，搜索“JSON Viewer Pro”或“JSON Formatter”。优先选择近一年更新、权限声明仅含“读取网页数据”的扩展。

第二步：点击“添加至Chrome”→确认添加。安装后无需重启浏览器。

第三步：刷新Network面板，重新触发请求。此时Preview标签页将自动变为树状结构，支持点击箭头展开/折叠对象与数组。

部分扩展会在Preview顶部增加“Raw”“Formatted”切换按钮，若默认未生效，点一下Formatted即可强制重绘。

解决Preview中中文显示为方块或乱码

方法1：用Charset扩展切换页面编码

前往Chrome网上应用店安装“Chrome-Charset”扩展。安装后点击地址栏右侧图标→选择UTF-8。该操作仅影响当前页面的文本解码方式，对JSON结构无影响，但能让Preview中的中文字符正确显示。

方法2：检查后端是否遗漏响应头

若服务端返回的是application/json但没带charset=utf-8，浏览器可能按系统默认编码（如Windows-1252）解析字节流，导致中文变方块。【关键】必须由后端在HTTP响应头中显式设置 Content-Type: application/json; charset=utf-8，前端无法补救。