用 Chrome DevTools Console 临时采集接口数据并导出为 JSON

有时我们在浏览网页时，会发现页面展示的数据本身就是通过 HTTP 接口动态加载的。

如果只是临时分析、采集少量数据，没有必要专门写一个后端程序或爬虫。Chrome DevTools 的 Console 本身就可以直接调用当前页面的接口、处理返回结果，并将数据导出为本地 JSON 文件。

这次是在分析一个随机题库页面时用到了这个方法。

1. 从 Network 找到接口

先打开 Chrome DevTools：

F12

切换到 Network，刷新页面或重新触发相关操作。

找到加载目标数据的请求，例如：

GET /edu-site/suggestionLibrary/multiple/1276195433579806720

查看 Response 后确认，页面所需的数据已经由接口一次性返回。

如果接口与当前页面同源，并且不需要额外复杂鉴权，可以直接在 Console 中调用。

2. 使用 fetch 调用接口

Chrome Console 支持顶层 await，因此可以直接写：

const response = await fetch(
  '/edu-site/suggestionLibrary/multiple/1276195433579806720'
);

const json = await response.json();

json;

这里使用相对路径有几个好处：

• 自动使用当前页面的协议和域名；
• 直接复用浏览器当前网络环境；
• 不需要自己重新拼完整 URL；
• 遇到 curl、OpenSSL、TLS 兼容问题时，浏览器环境有时反而更省事。

查看目标数组：

json.data.questionLibraries;

查看本次返回数量：

json.data.questionLibraries.length;

3. 多次请求并按 ID 去重

如果接口每次随机返回部分数据，可以多次请求，再使用 Map 按唯一 ID 去重。

const questions = new Map();

for (let i = 0; i < 10; i++) {
  const response = await fetch(
    '/edu-site/suggestionLibrary/multiple/1276195433579806720'
  );

  const json = await response.json();

  for (const question of json.data.questionLibraries) {
    questions.set(question.id, question);
  }
}

因为 Map#set() 在 key 相同时会覆盖原值，所以可以天然按 question.id 去重。

查看当前已经收集到的不同记录数量：

questions.size;

整个过程可以理解为：

随机抽样接口
    ↓
多次请求
    ↓
按业务主键放入 Map
    ↓
自动去重
    ↓
得到越来越完整的数据集合

4. 记录每轮新增数量

如果想判断数据是否逐渐收敛，可以记录每一次请求新增了多少条数据。

const questions = new Map();
const diffList = [];

let noNewCount = 0;
let round = 0;

while (noNewCount < 20) {
  round++;

  const before = questions.size;

  const response = await fetch(
    '/edu-site/suggestionLibrary/multiple/1276195433579806720'
  );

  const json = await response.json();

  for (const question of json.data.questionLibraries) {
    questions.set(question.id, question);
  }

  const added = questions.size - before;

  if (added === 0) {
    noNewCount++;
  } else {
    noNewCount = 0;
  }

  diffList.push(
    `第 ${round} 次：新增 ${added}，累计 ${questions.size}，连续 ${noNewCount} 次无新数据`
  );
}

最后统一查看：

diffList;

也可以一次性打印：

console.log(diffList.join('\n'));

相比在循环过程中持续 console.log()，先放到 diffList，最后统一查看，通常更方便复制和分析。

5. 将 Map 转成数组

Map 不适合直接作为普通 JSON 数组导出，所以先取出其中所有 value：

const allQuestions = [...questions.values()];

查看数量：

allQuestions.length;

6. 在浏览器中生成并下载 JSON 文件

浏览器本身提供了 Blob、URL.createObjectURL() 和 <a download>，因此不需要后端程序，也可以直接生成本地文件。

const allQuestions = [...questions.values()];

const blob = new Blob(
  [JSON.stringify(allQuestions, null, 2)],
  {
    type: 'application/json;charset=utf-8'
  }
);

const url = URL.createObjectURL(blob);

const a = document.createElement('a');
a.href = url;
a.download = `data-${allQuestions.length}.json`;

a.click();

URL.revokeObjectURL(url);

这几步分别做了什么：

JavaScript 对象
    ↓
JSON.stringify()
    ↓
JSON 字符串
    ↓
Blob
    ↓
浏览器内存中的文件内容
    ↓
URL.createObjectURL()
    ↓
临时 blob URL
    ↓
<a download>
    ↓
触发文件下载

最后调用：

URL.revokeObjectURL(url);

释放临时 URL。

7. 为什么这种方式很适合临时任务

这种方法特别适合以下场景：

• 临时查看接口返回数据；
• 随机接口需要多次采样；
• 希望按 ID 去重；
• 想快速验证某个数据规律；
• 需要临时导出 JSON；
• 不值得专门创建 Java、Python 或 Node 工程；
• 浏览器能正常访问，但命令行客户端因为 Cookie、TLS 或环境差异不方便复现。

Chrome Console 此时实际上同时承担了几个角色：

HTTP Client
+ JavaScript REPL
+ 数据处理工具
+ 临时文件生成工具

8. 适用边界

Console 更适合一次性、临时性的任务。

如果需求逐渐变成：

• 定时执行；
• 大量请求；
• 自动重试；
• 持久化数据；
• 长期运行；
• 多人复用；
• 复杂的数据清洗与分析；

就应该将这段临时代码迁移成正式脚本或程序。

另外，即使接口可以直接从浏览器调用，也应控制请求频率，并遵守网站自身的访问规则。

小结

对于一次性的网页数据分析，不一定一开始就要写完整程序。

一个很实用的路径是：

Network 找接口
    ↓
Console 用 fetch 验证
    ↓
Map 做去重
    ↓
数组记录采集过程
    ↓
Blob + download 导出 JSON

很多看起来需要“写个小工具”的事情，其实几行 Console 代码就可以先完成验证。

等需求真正稳定，再决定是否工程化。