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

【问题标题】：Can I mock the response of my request in chrome dev tool?我可以在 chrome 开发工具中模拟我的请求的响应吗？
【发布时间】：2019-07-01 03:09:50
【问题描述】：

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

例如，

当我调用 xxx.com 时，它会加载 index.html 和 index.html 加载 a.js。由于chrome缓存了js，我们是否可以模拟a.js，以便index.html将加载模拟的a.js？

【问题讨论】：

标签： javascript google-chrome debugging browser google-chrome-devtools

【解决方案1】：

没有办法在 devtool 本身中模拟服务器响应，但是有一些 chrome 扩展可以帮助解决这个问题：我已经尝试了其中的 7 个，但是（Tweak）只有一个能够：

拦截需要的网址
设置内容类型类型
设置负载

【讨论】：

这个扩展非常有用！我试过了，它真的很容易使用，谢谢！

【解决方案2】：

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

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);
  }
})();

【讨论】：

【解决方案3】：

另一个解决方案是 npm json-server。它在指定 url 的每个请求上返回存储的 json

【讨论】：