Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 27 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,32 @@
# 更新记录

当前版本:1.4.13。以下按版本记录主要变更,当前行为以 README 和使用说明为准。
当前版本:1.5.0。以下按版本记录主要变更,当前行为以 README 和使用说明为准。

## 1.5.0 · Field-level Response Mocking

从 JSON 数据查看扩展升级为可原位修改响应字段的调试工具。无需修改业务代码或启动额外 Mock 服务,直接在 DevTools 构造边界值,再通过真实页面验证。

### 交互

- 双击 / F2 编辑表格、数据树和查看器中的标量,Enter / 失焦提交,Esc 取消。
- 以轻微底色标记修改,顶部显示接口与字段数量,支持前后值清单、定位、单项恢复和统一退出。
- 刷新、强制刷新、清空捕获列表和重开面板后保留当前标签页规则,省去重复配置。

### 实现

- 字段级补丁替代默认的整份 JSON 编辑路径:保存路径、类型和值,不在输入时进行全量 diff。
- 真实 Fetch / 异步 XHR 返回后覆盖指定节点,未修改字段继续使用最新真实响应。
- 对象数组按唯一标识重新定位,避免后端排序变化后套错行;路径、类型或标识失效时跳过。
- `document_start` 页面脚本与隔离桥接在启动请求前恢复会话规则;规则按标签页与网站隔离。
- 保留普通超安全整数精度;支持在超过 1 MiB 的响应中修改小字段,单响应载入上限仍为 20 MiB。

### 工程

- 新增 13 项字段 Mock 自动检查,覆盖启动请求、会话恢复、跨站隔离、数组定位、取消、退出及大响应小补丁。
- 提供 `/mock-debug` Fetch / XHR 页面和手工复现步骤;维护既有回归、资源、预览与 ZIP 检查。
- 增加 `storage` 和 HTTP / HTTPS 网站访问权限,最低 Chrome 114;数据不上传。

完整操作、限制和验证范围见 [v1.5.0 发布说明](docs/RELEASE_v1.5.0.md)。

## 1.4.13:全面检查后的修复版

Expand Down
145 changes: 98 additions & 47 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,84 +1,135 @@
# API Table Viewer

Chrome DevTools 中的 JSON 接口调试扩展:把数组转换为表格,用内置 JSON 查看器浏览响应,支持搜索定位、请求详情和数据导出。
**See the data. Shape the response.**

当前版本 **1.4.13** · Manifest V3 · 无运行时依赖 · 数据在本地处理。
Chrome DevTools 中的 JSON 接口调试工具。把响应展开成可搜索的表格和数据树,直接双击字段构造测试数据,让真实页面在下一次请求中使用修改后的响应。

## 安装与开始使用
[![CI](https://github.com/Luyii/API-Table-Viewer/actions/workflows/ci.yml/badge.svg)](https://github.com/Luyii/API-Table-Viewer/actions/workflows/ci.yml)
![Version](https://img.shields.io/badge/version-1.5.0-2563eb)
![Chrome](https://img.shields.io/badge/Chrome-114%2B-4285f4)
![Manifest](https://img.shields.io/badge/Manifest-V3-16a34a)
![Dependencies](https://img.shields.io/badge/runtime_dependencies-0-0f766e)

1. 下载项目源码或扩展 ZIP,完整解压到固定目录。
2. 打开 `chrome://extensions`,开启“开发者模式”,点击“加载已解压的扩展程序”。
[快速开始](#快速开始) · [v1.5.0 更新](#v150--field-level-response-mocking) · [工作原理](#工作原理) · [测试说明](docs/TESTING.md) · [更新记录](CHANGELOG.md)

## v1.5.0 · Field-level Response Mocking

从“看清接口数据”,进一步到“控制页面收到的数据”。

**双击修改 → 自动进入编辑模式 → 重新查询或刷新网页 → 验证页面表现。**

无需修改业务代码,无需额外启动 Mock 服务,也不必复制整份 JSON。只记录修改字段的路径、类型和值,在真实接口返回后覆盖对应节点。未修改的字段继续使用最新后端数据。

| 能力 | 具体行为 |
| --- | --- |
| 原位编辑 | 表格、数据树和 JSON 查看器中双击标量,或聚焦后按 F2;Enter / 失焦提交,Esc 取消 |
| 修改可追踪 | 轻微底色标记;悬停查看原值;顶部汇总接口数和修改数,支持清单核对、定位和单项恢复 |
| 刷新保留 | 普通刷新、强制刷新、清空捕获列表、重开 DevTools 后继续应用当前标签页的规则 |
| 字段级补丁 | 不在输入时计算整份 JSON diff,不把完整响应作为每次编辑的通信载荷 |
| 稳定数组定位 | 对象数组按唯一 ID / UUID / key 定位,排序变化后仍修改同一条记录;路径或标识失效时跳过 |
| 一键退出 | 清除当前网站的修改规则;后续请求恢复真实响应 |

例如,把 `data.records[0].amount` 从 `128.5` 改为 `-999`,把 `customerName` 改为超长文本,可以直接观察金额样式、异常状态和布局边界。新请求中的库存、时间等其他字段仍由真实后端返回。

> 修改会在网页**下一次请求**时应用。插件不会直接修改 Vue / React 的组件状态;“退出编辑”也不会自动重绘业务页面。请求仍会到达后端,包括 POST 等操作。

完整设计和版本说明见 [v1.5.0 发布说明](docs/RELEASE_v1.5.0.md)。

## 快速开始

1. 下载源码或扩展 ZIP,完整解压到固定目录。
2. 打开 `chrome://extensions`,开启开发者模式,选择“加载已解压的扩展程序”。
3. 选择**直接包含 `manifest.json` 的文件夹**。
4. 打开目标页面的 DevTools,选择 **API Table** 标签,刷新页面并选择 JSON 请求。
5. 从“数据结构”选择数组并打开 Table;点击单元格可查看完整内容。
4. 打开目标网页 DevTools → **API Table**,刷新网页,选择 JSON 请求。
5. 查看表格或数据树,双击要修改的字段;回到网页重新查询或刷新,观察结果。

更新、加载失败排查见 [安装说明](docs/INSTALLATION.md)。
更新时替换旧目录、重新加载扩展,再刷新目标网页,以安装新的页面启动脚本。加载失败排查见 [安装说明](docs/INSTALLATION.md)。扩展本身不需要 Node.js、Python 或构建工具。

## 功能
## 不止于 Mock

| 场景 | 支持内容 |
| --- | --- |
| 捕获接口 | JSON 响应、已有 Network 记录补录、URL / 方法 / 状态筛选、保留导航记录 |
| 表格分析 | 全数组搜索、匹配高亮与跨页定位、排序、分页、显示列、列宽自适应及拖动调整 |
| 查看长内容 | 单元格单行省略;点击后使用内置 JSON 查看器显示完整数据 |
| JSON 浏览 | 普通数据默认展开全部;大数据确认后完整遍历、虚拟滚动;路径跳转与搜索定位 |
| 请求复现 | 请求详情、复制请求体 JSON、复制 Bash 格式 cURL |
| 导出 | 原始响应、当前 JSON 节点、全部筛选和排序后的 CSV / Markdown / JSON |
| 布局 | 左侧列表独立收起、拖动调宽、记住布局和分页偏好 |
| 数值 | 普通整数字面量超出安全整数范围时仍精确保留,支持搜索、排序与导出 |
| 请求捕获 | JSON 响应、已有 Network 记录补录、URL / 方法 / 状态筛选、保留导航记录 |
| 表格分析 | 全数组搜索、匹配高亮与跨页定位、排序、分页、列显隐、自动列宽与拖动调整 |
| JSON 浏览 | 普通数据默认展开;大数据分批遍历、虚拟滚动;字段路径跳转与搜索定位 |
| 长内容查看 | 单元格摘要、完整值弹框、分段文本与完整复制 |
| 请求复现 | 请求详情、请求体 JSON、Bash / WSL / Git Bash 格式 cURL |
| 数据导出 | 原始响应、当前节点、全部筛选和排序后的 CSV / Markdown / JSON |
| 数值精度 | 普通超安全整数字面量精确保留,贯穿浏览、搜索、排序、复制和 JSON 导出 |
| 面板布局 | 独立收起左侧列表、拖动分栏、统一滚动条、布局与分页偏好记忆 |

表头字段保持单行,内容自动列宽通常为 88–380 px;手动列宽通常最高 960 px,超长表头可突破上限。长内容省略展示,隐藏列不影响导出。

## 工作原理

```mermaid
flowchart TD
A[DevTools 原位编辑] --> B[字段补丁:路径、类型与行标识]
B --> C[会话规则:标签页 × 网站]
C --> D[document_start 安装 Fetch / XHR 拦截]
E[真实接口响应] --> D
D --> F[应用字段补丁后交给页面]
```

- **浏览与修改分离**:Worker 保存原始响应与解析结果。编辑只生成小范围字段补丁,不改写捕获记录,原始数据仍可核对和导出。
- **启动阶段恢复规则**:MAIN world 脚本在 `document_start` 接管主页面 Fetch / XHR,隔离脚本从扩展会话中读取规则。启动请求等待初始化;异常超时回退真实响应。
- **会话隔离**:规则按标签页和页面网站保存,跨站点、跨标签页不混用。关闭标签页、重启浏览器或重新加载扩展后清除。
- **有界的大数据展示**:Worker 解析、分页与搜索;较大子树分批建立索引,只把当前窗口附近的节点交给 DOM。

模块分工、消息流和约束见 [开发与架构](docs/DEVELOPMENT.md)。

表格自适应指**列宽**:内容自动宽度通常为 88–380 px,手动宽度通常最高 960 px;完整表头字段名单行所需宽度始终作为下限,超长表头可突破上述上限,通过表格横向滚动查看。长内容不会持续撑高单元格。隐藏列仅影响屏幕显示,导出仍包含全部字段。
## 支持范围与边界

- Chrome 114+、Manifest V3。字段 Mock 支持主页面 Fetch 和异步 XHR 的 JSON 文本 / JSON 响应;不覆盖 Worker、iframe、WebSocket 或流式协议。
- 接口按**方法与完整 URL(含查询参数)**匹配,不按请求体区分。仅替换已有标量,保持原类型;不新增 / 删除字段,不调整数组结构。
- 对象数组需有唯一 `id`、`uuid`、`key` 或以 `Id` 结尾的标识字段。用于定位的标识本身不允许修改;字段缺失、类型改变或标识失效时跳过,并在网页控制台提示。
- 单响应载入上限 **20 MiB UTF-8**;大于 1 MiB 的响应也可修改小字段。单个编辑字段上限 **64 KiB**,最多 **30 个接口、每接口 200 个字段、1 MiB 规则配置**。
- 捕获缓存最多 **150 条或 80 MiB 原文**。超过 **5,000 节点、500,000 展示字符或 32 层嵌套**的子树需确认后浏览。虚拟滚动减少 DOM 数量,不消除解析和序列化开销。
- 普通超安全整数精确保留;小数、指数形式仍按 JavaScript Number 处理。需要原始写法时使用原始响应复制 / 下载。

## 快捷键

| 按键 | 操作 |
| --- | --- |
| Ctrl / ⌘ + F | 聚焦当前上下文的接口、表格或 JSON 搜索 |
| 双击值 / F2 | 原位编辑字段 |
| 编辑时 Enter / Esc | 提交 / 取消本次输入 |
| Ctrl / ⌘ + F | 聚焦当前接口、表格或 JSON 搜索 |
| F3 / Shift + F3 | 下一个 / 上一个匹配 |
| Ctrl / ⌘ + G,配合 Shift | 下一个 / 上一个匹配 |
| 搜索框中 Enter / Shift + Enter | 下一个 / 上一个匹配 |
| Esc | 关闭弹框 |

按键需要焦点位于扩展面板内;Chrome 可能优先处理部分系统快捷键。树节点支持整行点击、Enter / 空格展开与方向键收起。
| Esc | 未编辑字段时关闭弹框 |

## 大数据与精度边界
焦点需位于扩展面板内;部分系统快捷键可能由 Chrome 优先处理。

- 单响应最多 **20 MiB UTF-8**;缓存最多 **150 条或 80 MiB 原文**,达到限制时淘汰旧记录。解析对象和界面会占用额外内存。
- 当前子树超过 **5,000 节点、500,000 展示字符或 32 层嵌套**时,先显示提示。点击“按需浏览此数据(展开全部)”后自动遍历全部节点,仅渲染可见窗口。没有“暂停展开”按钮。
- 复制与导出完整数据仍需要处理全部对应数据;极深嵌套的格式化 / 导出可能受序列化调用栈限制。
- 普通超安全整数保持精确;小数和指数形式按 JavaScript Number 处理。需要保留全部原始写法时,使用原始响应复制 / 下载。
## 工程与验证

## 开发与检查

需要 Node.js 18+;打包另需 Python 3。无需 `npm install`。
开发检查需要 Node.js 18+ 和 Python 3,**无需安装项目依赖**。

```sh
npm test
python3 scripts/package.py
python3 tests/package-archive.py
```

Windows 可用 `py scripts/package.py`。扩展安装本身不需要 Node.js 或 Python。
| 检查 | 范围 |
| --- | --- |
| 88 项回归 | JSON 解析、精度、排序、搜索、导出、缓存、异步状态与界面逻辑 |
| 8 个 HTTP / Worker 子案例 | 本地接口、较大记录集、长文本与解析联动 |
| 13 项字段 Mock 检查 | 补丁、稳定行定位、Fetch / XHR、启动请求、会话恢复、隔离、取消与退出 |
| 18 项响应替换回归 | 原替换引擎、规则更新、单次消费、超时释放与控制器 |
| 3 项预览检查 | 示例 HAR、路由、脚本与标识完整性 |
| 资源与压缩包检查 | MV3 清单、资源路径、CSP、脚本作用域、白名单、源文件一致性与解压验证 |

打包产物位于 `dist/API-Table-Viewer-v1.4.13.zip`,解压根目录直接包含清单。源码无需构建即可作为已解压扩展加载。
GitHub Actions 在 push / pull_request 时以 Node.js 18、22、24 执行检查,再验证 ZIP。实际运行结果见上方 CI 标记;本地自动检查中的 DOM / Chrome API 模拟不替代真实浏览器验收,详见 [测试说明](docs/TESTING.md)。

自动检查覆盖 78 项回归、扩展资源与脚本检查,以及本地接口联动。命令和覆盖范围见 [测试说明](docs/TESTING.md),版本修复见 [检查记录](CHECK_REPORT.md)。
`npm run test:manual` 启动本地复现服务,访问 http://127.0.0.1:8765 。`/mock-debug` 提供真实 Fetch / XHR 订单页面,便于验证编辑、刷新保留和退出恢复。步骤见 [Chrome 复现指南](docs/CHROME_REPRO.md)。打包产物为 `dist/API-Table-Viewer-v1.5.0.zip`。

## 文档

- [使用说明](docs/USAGE.md)
- [安装与故障排查](docs/INSTALLATION.md)
- [开发与架构](docs/DEVELOPMENT.md)
- [测试与发布检查](docs/TESTING.md)
- [更新记录](CHANGELOG.md)
- [贡献说明](CONTRIBUTING.md)

## 隐私与许可

扩展不上传捕获的数据,不加载远程代码,清单未申请额外权限。复制 cURL、请求详情和导出文件可能包含接口凭证及业务数据,分享前应自行检查内容。

项目尚未指定开源许可证;创建 GitHub 仓库不代表授予开源使用许可。
[使用说明](docs/USAGE.md) · [安装排查](docs/INSTALLATION.md) · [开发架构](docs/DEVELOPMENT.md) · [测试与发布](docs/TESTING.md) · [v1.5.0 发布说明](docs/RELEASE_v1.5.0.md) · [贡献说明](CONTRIBUTING.md)

## 数据与权限

## 本地 Chrome 复现环境
扩展不上传捕获的数据,不加载远程代码。HTTP / HTTPS 网站访问用于在页面启动时安装请求拦截;`storage` 用于保存当前浏览器会话的字段规则。真实接口通信仍由目标网页发起。cURL、请求详情和导出文件可能包含凭证及业务数据,分享前请检查内容。

执行 `npm run test:manual`,打开 http://127.0.0.1:8765 ,在 API Table 面板打开后发送案例。无需安装依赖;数据说明和操作步骤见 [Chrome 复现指南](docs/CHROME_REPRO.md)。`npm run test:fixtures` 检查 HTTP 接口数据与 Worker 联动。
项目尚未指定开源许可证;公开仓库不代表授予开源使用许可。
12 changes: 12 additions & 0 deletions docs/CHROME_REPRO.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,15 @@ npm run test:manual
- 页面和脚本路由、POST 回显、413、422、404、405 及非 JSON 响应。

命令与执行记录汇总见 [测试说明](TESTING.md)。

## 原位字段 Mock 验收(1.5.0)

更新扩展后关闭、重开 DevTools 并刷新目标网页,以安装新的启动脚本。打开本地服务的 `/mock-debug`,自动加载订单。API Table 中选择 `/api/mock-orders`,打开 `data.records` 表格。

1. 双击 customerName,输入测试名称,Enter 提交;双击 amount 修改数值。观察轻微底色、顶部“编辑模式”和两处修改。Esc 应取消当前输入,失焦应提交;非法数字不能提交。
2. 网页点击 Fetch、XHR 查询,两者显示修改值,未改字段继续来自后端。Network 仍有真实请求。手动 / Ctrl+R / 强制刷新后,页面启动请求应继续得到修改值。
3. 清空插件捕获列表、关闭并重开 DevTools 后再请求,规则仍保留。顶部“查看修改”核对前后值,定位按钮进入对应字段,恢复一项只移除该字段。
4. 点击“退出编辑”,再请求或刷新,网页恢复真实值。退出本身不重渲染业务页面。另一个标签页 / 其他网站不继承规则。
5. 对 2 MiB+ 响应只修改小字段,确认没有整份编辑器的 1 MiB 限制。对象数组重新排序后仍修改相同 ID 的行;缺少 / 重复 ID 或字段类型变化时应跳过并在网页控制台提示。

自动测试通过不等于上述真实 Chrome 行为已验收,请记录实际浏览器版本和结果。
Loading