我可以在 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

从 Chrome 117 开始，您可以在本地模拟 Web 内容。

要覆盖 Web 内容，请打开网络面板，右键单击请求，然后选择覆盖内容。

DevTools 目前支持以下请求类型的内容覆盖：图像（例如 avif、png）、字体、fetch 和 XHR、脚本（css 和 js）以及文档 (html)。DevTools 现在将不支持的类型的“覆盖内容”选项灰显。

Answer 3

您可以使用+尝试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);
  }
})();