Chrome中查看格式化JSON有四种方法:一、用开发者工具Network面板自动识别并树状显示;二、在Console中用JSON.stringify(JSON.parse())手动格式化;三、安装JSON Viewer扩展强制渲染;四、复制响应到在线工具校验并美化。

如果您在Chrome浏览器中接收到JSON格式的响应数据,但其显示为未格式化的单行文本,则可能是由于原始响应未经过美化处理。以下是多种方法让Chrome浏览器以可读方式查看和格式化JSON数据。
一、使用开发者工具网络面板查看格式化JSON
Chrome内置的开发者工具可自动识别并格式化响应体中的JSON内容,前提是响应头包含正确的Content-Type(如application/json)且内容本身语法合法。
1、按下 F12 或 Ctrl+Shift+I(Windows/Linux)或 Cmd+Option+I(macOS)打开开发者工具。
2、切换到 Network 选项卡。
3、刷新页面或触发目标请求,使对应请求出现在列表中。
4、点击该请求,在右侧面板中选择 Response 标签页。
5、若响应头中 Content-Type: application/json 存在且JSON内容有效,Chrome将自动以树状结构高亮显示并支持折叠展开。
二、手动粘贴JSON到开发者工具控制台进行格式化
当响应未被自动识别为JSON(例如Content-Type为text/plain),或需对任意JSON字符串进行快速美化时,可在Console中调用内置JSON方法实现格式化输出。
1、按下 F12 打开开发者工具,切换至 Console 面板。
2、输入以下代码并回车:JSON.stringify(JSON.parse(`你的JSON字符串`), null, 2)。
3、若原始字符串含转义问题,可先将其赋值给变量,再执行解析与格式化操作。
4、格式化结果将以缩进形式打印在控制台中,可右键复制为纯文本。
三、安装JSON Viewer扩展程序强制格式化响应
第三方扩展可覆盖默认行为,在任意Content-Type下尝试解析并渲染JSON,适用于调试非标准API响应或本地文件。
1、访问Chrome网上应用店,搜索关键词 JSON Viewer。
2、选择评分高、权限声明清晰的扩展(如“JSON Viewer Pro”或“JSON Formatter”)并点击 添加至Chrome。
3、安装完成后刷新Network面板,已发送的JSON响应将自动以彩色语法高亮、可折叠树形结构呈现。
4、部分扩展还支持点击响应区域直接跳转到格式化视图,无需手动切换标签页。
四、通过源代码视图配合在线格式化工具辅助验证
当开发者工具无法正确解析JSON(如存在不可见控制字符、BOM头或编码不匹配)时,可导出原始响应并借助外部工具校验与美化。
1、在Network面板中右键目标请求,选择 Copy → Copy response。
2、新建文本编辑器或访问可信的在线JSON校验网站(如jsonlint.com)。
3、粘贴内容后点击 Validate JSON,确认语法有效性。
4、若校验通过,使用同一工具的 Format JSON 功能生成缩进版本,再复制回本地分析。











