复用Chromium窗口/页面时Puppeteer setCacheEnabled失效问题

你的代码能拦截第三方JS，但本地JS仍读取缓存，大概率是缓存控制不彻底、请求拦截覆盖不全或浏览器残留缓存导致的，试试以下几种实用方案：

• 强制为所有JS请求添加缓存禁用头
  即便开启了setCacheEnabled(false)，部分本地请求仍可能读取缓存，手动在请求头中添加缓存控制参数，确保浏览器彻底绕过缓存：

  await page.setRequestInterception(true);
  await page.setCacheEnabled(false);
  
  page.on('request', async (request) => {
    if (request.url().includes(".js")) {
      // 覆盖请求头，强制禁用缓存
      const modifiedHeaders = {
        ...request.headers(),
        'Cache-Control': 'no-cache',
        'Pragma': 'no-cache',
        'Expires': '0'
      };
      // 这里可插入你的JS内容修改逻辑
      await request.continue({ headers: modifiedHeaders });
    } else {
      await request.continue();
    }
  });
  

• 启动浏览器时彻底禁用缓存
  复用窗口可能残留之前的缓存，启动Chromium时添加命令行参数，从根源切断缓存机制：

  const browser = await puppeteer.launch({
    args: [
      '--disable-cache',
      '--disable-application-cache',
      '--disk-cache-size=0',
      '--disable-offline-load-stale-cache'
    ],
    // 若需复用窗口，确保首次启动时就添加这些参数
  });
  

• 拦截响应并强制返回修改后的内容
  如果本地JS已被缓存加载，直接拦截响应并替换内容，完全跳过缓存读取：

  page.on('response', async (response) => {
    const url = response.url();
    if (url.includes(".js") && response.ok()) {
      // 获取原始JS内容并修改
      const originalContent = await response.text();
      const modifiedContent = originalContent.replace('目标代码片段', '你的修改内容');
      
      // 也可在request拦截时直接返回修改后的内容，不走网络请求：
      // await request.respond({
      //   status: 200,
      //   contentType: 'application/javascript',
      //   body: modifiedContent
      // });
    }
  });
  

• 确保拦截逻辑在页面加载前生效
  本地JS如果是页面同步加载的，必须在page.goto()之前设置好所有拦截监听，避免错过请求时机：

  const page = await browser.newPage();
  // 先开启拦截并绑定事件
  await page.setRequestInterception(true);
  await page.setCacheEnabled(false);
  page.on('request', async (request) => { /* 你的拦截逻辑 */ });
  // 再跳转页面
  await page.goto('你的页面地址');
  

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