JSON 与图片预览：专用的数据类型处理
JSON 预览
JSON 是现代 API 最常用的数据交换格式，httpCanary 对它做了专门的处理：
- 自动格式化缩进——原始 JSON 可能是压缩在一行的，httpCanary 会自动展开成多行并加缩进
- 节点折叠/展开——点击左侧箭头可以折叠嵌套对象，聚焦关注的部分
- 值类型标记——字符串、数字、布尔值、null 会用不同颜色或样式区分
- 路径显示——部分版本支持显示当前字段的 JSON Path，方便在长 JSON 中定位
JSON 预览实战
假设你在调试一个用户信息接口，返回的 JSON 里嵌套了很多层级的数据：
- 进入响应标签页 → Body 区域 → 切换到 JSON 视图
- 看到格式化的 JSON 结构，可以折叠不需要的部分
- 长按某个字段值只复制这个值
- 用横竖屏切换优化阅读空间
JSON 数据调试常见场景
场景一：字段缺失或类型不对
接口文档说某个字段应该是字符串，但实际返回的是 null 或数字。在 JSON 视图里一眼就能看出。
场景二：大数字精度丢失
JavaScript 的 number 类型安全整数上限是 2^53 - 1。如果服务端返回的用户 ID 超过这个范围，在 JSON 预览里可能会看到被截断的值。这种情况需要让服务端把大数字转成字符串返回。
场景三：中文乱码
如果响应头的 Content-Type 声明了 charset=utf-8，但 JSON 里的中文字符还是乱码，说明服务端编码处理有问题。
图片预览
当响应体是图片时（Content-Type 为 image/*），httpCanary 提供两种查看方式：
- 直接预览——在响应标签页直接显示图片内容
- 保存到本地——导出为文件，用其他看图应用打开
支持的图片格式包括：jpg、png、gif、webp、bmp、svg。
音视频预览
对于音频和视频类型的响应体：
- httpCanary 会显示文件类型和大小
- 提供「打开」按钮调用系统播放器播放
- 或者保存到本地用其他播放器打开
视频自动下载插件可以自动捕获 m3u8 等流媒体链接并下载，详见 插件扩展。
WebSocket 实时通信
WebSocket 是长连接协议，数据不是一次性返回的而是持续推送的。httpCanary 对 WebSocket 请求的展示方式也不同：
- 以聊天消息界面的形式展示每一条消息
- 区分客户端发送和服务器推送
- 每条消息都有独立的时间戳
- 支持查看每条消息的原始内容
这让实时通信的调试体验非常直观——不用去翻一堆响应内容，聊天界面的形式天然就把交互过程展示清楚了。
其他数据格式
| 格式 | 处理方式 |
|---|---|
| XML | 自动格式化，支持折叠展开 |
| Form 表单数据 | 解析为键值对列表显示 |
| Cookie | 单独列出每个 Cookie 的名称、值、域名、过期时间 |
| 二进制数据 | HEX 视图查看原始字节 |
| 压缩但未解压 | 极少数情况——通常说明解密失败或编码不支持 |
预览和注入的关系
如果你想修改响应数据来调试客户端逻辑，数据预览是第一步：先看清原始数据的结构，再用 静态注入 或 动态注入 去修改它。预览页面就是注入配置的「素材来源」。