我可以在chrome开发工具中模拟我的请求的响应吗？

Question

我正在调试仅在生产中发生的前端问题。我想知道是否有任何方法可以模拟请求的响应或模拟某些静态文件。

例如，

当我呼叫xxx.com时，它将加载index.html，而index.html加载a.js。 由于chrome缓存了js，我们是否有可能模拟a.js以便index.html加载模拟的a.js？

Answer 1

在devtool本身中无法模拟服务器响应，但是有一些chrome扩展对此提供了帮助： 我已经尝试了其中的7种，但是（Tweak）唯一的一种能够做到：

1. 拦截所需的URL
2. 设置内容类型类型
3. 设置有效载荷

Answer 2

您可以使用puppeteer + page.setRequestInterception()来尝试request.respond()。像这样：

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch({ headless: false });
    const [page] = await browser.pages();

    await page.setRequestInterception(true);
    page.on('request', (interceptedRequest) => {
      if (interceptedRequest.url() === 'https://sb.scorecardresearch.com/beacon.js') {
        interceptedRequest.respond({
          body: 'document.title = "42";',
        });
      } else {
        interceptedRequest.continue();
      }
    });

    await page.goto('https://stackoverflow.com/help');

    // await browser.close();
  } catch (err) {
    console.error(err);
  }
})();