如何在Puppeteer JS中保存JSON响应？含Node.js实操示例

一、通过Puppeteer直接实现 #

你可以利用Puppeteer的page.on('response')事件监听所有网络请求，筛选出JSON类型的响应并保存到本地。修改你的示例代码如下：

const puppeteer = require('puppeteer');
const fs = require('fs');
const path = require('path');

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  // 监听响应事件
  page.on('response', async (response) => {
    // 筛选JSON类型的响应
    const contentType = response.headers()['content-type'];
    if (contentType && contentType.includes('application/json')) {
      try {
        const jsonData = await response.json();
        // 生成唯一文件名，避免覆盖
        const fileName = `response_${Date.now()}.json`;
        const savePath = path.join(__dirname, fileName);
        // 写入文件
        fs.writeFileSync(savePath, JSON.stringify(jsonData, null, 2));
        console.log(`已保存JSON响应到：${savePath}`);
      } catch (err) {
        // 处理解析失败的情况（比如非标准JSON）
        console.log('解析JSON响应失败:', err.message);
      }
    }
  });

  await page.goto('https://www.oddsportal.com/');
  await page.setViewport({ width: 1920, height: 941 });
  await page.waitForSelector('.flex:nth-child(2) > .bg-gray-extra_dark > .h-\[16px\]');
  await page.click('.flex:nth-child(2) > .bg-gray-extra_dark > .h-\[16px\]');

  await browser.close();
})();

关键逻辑说明：

• 通过page.on('response')捕获所有网络响应
• 检查响应的content-type头判断是否为JSON
• 解析响应内容并通过fs模块写入本地文件

二、借助Chrome开发者工具手动保存 #

如果你不需要自动化流程，也可以直接用Chrome DevTools手动保存：

• 打开Chrome浏览器访问目标网站，按F12打开开发者工具，切换到Network标签
• 在请求列表中筛选XHR/Fetch类型，快速定位JSON请求
• 点击目标请求，切换到Response或Preview标签
• 右键点击内容区域，选择Save as即可将JSON内容保存到本地

两种方法的区别 #

• Puppeteer：适合自动化场景，能批量、定时捕获并保存JSON响应，无需人工干预
• Chrome开发者工具：适合临时调试、手动获取特定JSON响应，操作简单但无法自动化

内容的提问来源于stack exchange，提问作者Alex