Chrome 扩展

Compare JSON - Diff API Responses 是一个 Chrome 扩展,可以在任意页面上捕获 JSON API 响应,并在 comparejson.com 上对比其中任意两个——无需再从 DevTools 里复制粘贴。

安装

Chrome 应用商店安装,然后将其固定到工具栏以便快速访问。

捕获 API 响应

  1. 点击工具栏上的扩展图标打开弹窗。
  2. 点击 Start 按钮(▶)开始收集。从此刻起,页面通过 fetchXMLHttpRequest 收到的每个 JSON 响应都会被捕获——跨所有标签页生效。工具栏图标上的角标会显示已捕获的响应数量。
  3. 正常使用 Web 应用即可。直接访问 .json URL(由 Chrome 内置 JSON 查看器渲染)也会被捕获。

弹窗列表中的每个条目都会显示捕获响应的 HTTP 状态码、请求方法和 URL。

对比两个响应

  1. 点击一个条目,将其标记为 Base(差异视图的左侧)。
  2. 点击另一个条目,将其标记为 Contrast(差异视图的右侧)。再次点击已标记的条目可取消标记。
  3. 点击 Compare。扩展会在新标签页中打开 comparejson.com 的对比结果——两个响应体会直接传递给页面,不会上传到任何服务器。

置灰的条目无法选择:要么响应体不可读,要么超过了 2 MB 的捕获上限。

弹窗控件

  • Start / Pause —— 开启或暂停收集。收集状态在浏览器重启后仍然保留。
  • Clear —— 清空所有已捕获的响应。
  • Keep N —— 最多保留多少个响应(1–1000,默认 100)。达到上限时,最旧的条目会被丢弃。
  • Reset —— 清除当前的 Base/Contrast 选择。

隐私

捕获的响应仅保存在浏览器的会话存储中,浏览器关闭时即被清除。点击 Compare 时,选中的两个响应体通过 Chrome 扩展消息机制直接传递给 comparejson.com 标签页——不会经过任何第三方服务器。