Oolaf Web JSON Prettify：给浏览器里的 JSON 一个顺手视图

https://oolaf.lanzoul.com/i6N1R3xel74d

接口调试时，最烦不是拿不到数据，而是数据摆在眼前却不好看。浏览器直接打开 JSON 地址，常见结果是一整坨文本：层级深、字段多、数组长，找一个值要靠肉眼扫半天。进 DevTools 看接口响应也一样，Headers、Payload、Response 来回切，复制字段、定位路径、比对结构都费时间。

Oolaf Web JSON Prettify 做事很直接：把浏览器里打开的 JSON 页面，变成可读、可查、可复制的 JSON 查看器；同时在 DevTools 里加一个 Oolaf JSON 面板，专门看页面请求里的 JSON 响应。

1. 解决什么问题

直接打开 JSON 页面不好读

很多接口地址直接在 Chrome 或 Edge 里打开时，浏览器只给一段原始文本。数据少还能忍，数据一多，问题马上出现：

- 层级看不清

- 数组对象分不明

- 字段位置不好找

- 长字符串挤在一行里

- 想复制局部内容很麻烦

这个扩展会自动识别页面正文是不是合法 JSON。只要当前页面内容是 JSON，它就接管页面显示，改成树形结构和格式化视图。

接口调试时切换成本高

开发时常见场景：

- 看某个接口返回了什么

- 查某个字段有没有值

- 对比请求参数和响应结果

- 复制响应 JSON 给同事或测试

- 根据真实返回快速生成 Mock 数据

原生 DevTools 能做到，但步骤碎。Oolaf JSON 面板把 JSON 响应集中列出来，左侧选请求，右侧看详情，不用在 Network 里反复点开 Response。

大 JSON 搜索麻烦

大响应里找字段，普通浏览器查找只能搜文本，不能按值类型、路径、精确匹配、正则去筛。这个工具支持按 key、value、path 搜索，还能按数据类型过滤，适合字段多、层级深的接口响应。

2. 特点和功能

自动格式化 JSON 页面

安装扩展后，直接打开 JSON 接口地址即可使用。工具会判断页面内容：

- 合法 JSON 才处理

- 普通网页不改

- 不拦截普通页面里的 fetch 或 XMLHttpRequest

- 只处理浏览器直接打开后可见内容为 JSON 的页面

这点比较克制，不会把正常网站搞乱。

树形视图和原始视图切换

JSON 默认用树形结构展示。对象、数组、字符串、数字、布尔值、null 都有清晰层级。

也可以切到 Raw 原始视图，看格式化后的完整文本。适合复制、比对、保存。

展开和折叠控制

工具提供常用层级控制：

- 展开全部

- 折叠全部

- 默认展开 Level 1 到 Level 4

- 单个节点手动展开或收起

看大对象时不用一次性展开到底，先看结构，再钻细节。

搜索 key、value、path

内置搜索框支持查：

- 字段名

- 字段值

- JSON 路径

搜索结果能前后跳转，高亮显示。常用查字段不用再靠浏览器 Ctrl + F 硬扫。

多种搜索模式

搜索不只支持普通包含匹配，还支持：

- Contains：包含匹配

- Exact：精确匹配

- Regex：正则匹配

- Case：大小写敏感

查固定字段、批量匹配字段名、找特殊格式值时更省事。

按值类型过滤

可以快速筛出特殊值：

- Number

- Boolean

- Null

- Empty string

- Empty array

- Empty object

- False

调接口时很实用。比如查哪些字段返回了 null，哪些数组为空，哪些布尔值是 false，不用自己一层层翻。

一键复制

工具支持多种复制：

- 复制格式化 JSON

- 复制原始 JSON

- 复制单行内容

- 复制 key

- 复制 value

- 复制 path

- 复制请求 URL

调试、写文档、贴日志时少很多手工整理。

生成 Mock.js 模板

可以从当前 JSON 生成 Mock.js 模板。真实接口返回拿到后，点一下就能变成 mock 基础数据。

适合前后端联调前期、接口不稳定、需要本地模拟响应时用。

DevTools 专用 JSON 面板

扩展会在 DevTools 里增加 Oolaf JSON 面板。

打开 DevTools 后刷新页面，它会监听 Network 请求，把 JSON 响应列在左侧。点开一个请求后可以看：

- Headers

- Payload

- Response

Response 使用同一套 JSON 查看器，支持树形查看、搜索、过滤、复制。

请求列表可搜索、可清空

DevTools 面板左侧是 JSON 请求列表，显示请求方法、状态码、大小、完成时间和耗时。请求多时可以搜索过滤，也可以一键清空列表。

适合 Chrome 和 Edge 本地安装

这是本地浏览器扩展，面向 Chrome / Edge。加载方式是浏览器扩展页里的 Load unpacked，不依赖服务端，也不需要把 JSON 传到外部网站。