17370845950

搜狗浏览器如何使用内置的JSON格式化工具 搜狗浏览器开发者工具JSON视图教程
搜狗浏览器支持JSON格式化功能,可通过开发者工具的“网络”选项卡捕获JSON响应并自动以树状结构展示;在“控制台”中使用JSON.stringify(JSON.parse())方法可手动美化粘贴的JSON文本,便于查看层级与复制使用。

如果您在使用搜狗浏览器进行网页开发或调试时接收到未格式化的JSON数据,可能难以阅读和分析。内置的开发者工具提供了JSON格式化视图功能,可自动美化并结构化显示JSON内容,便于查看字段层级与数据类型。

本文运行环境:联想小新Pro 16,Windows 11

一、启用开发者工具并加载JSON响应

通过开发者工具捕获网络请求中的JSON数据是使用格式化功能的前提。该操作能确保浏览器识别响应内容类型为application/json,从而激活内置的结构化视图。

1、打开搜狗浏览器,访问包含JSON接口调用的网页,例如通过Ajax请求获取用户信息的页面。

2、按下 F12 键启动开发者工具,切换到“网络(Network)”选项卡。

3、刷新页面或触发相关操作,使浏览器发出新的网络请求。

4、在网络列表中查找类型为 fetchxhr 的请求,点击进入详情页。

二、查看自动格式化的JSON数据

当响应内容为合法JSON时,搜狗浏览器会自动将其转换为可展开的树状结构,省去手动解析原始文本的麻烦。

1、在请求详情面板中,点击“响应(Response)”子标签页。

2、若服务器返回的是标准JSON格式,内容将自动以缩进和高亮方式呈现,并支持节点折叠。

3、对象和数组前会出现小箭头图标,点击即可展开或收起内部结构。

4、字符串、数字、布尔值等数据类型会以不同颜色区分,提升可读性。

三、手动格式化粘贴的JSON文本

对于复制的原始JSON字符串或从其他来源获取的内容,可通过控制台实现快速格式化输出。

1、切换至开发者工具的“控制台(Console)”选项卡。

2、输入以下代码并回车执行:JSON.stringify(JSON.parse(你的JSON变量), null, 2)

3、将其中“你的JSON变量”替换为实际的JSON字符串或已定义变量名。

4、格式化后的结果将以缩进为2个空格的美化形式输出到控制台,可直接复制使用。