我可以在 Chrome DevTools 中模拟我的请求的响应吗？

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. 设置content-type类型
3. 设置负载

Answer 2

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

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

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

Answer 3

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

Answer 4

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

Answer 5

Chrome 开发工具还提供了一种方法，允许您编辑 JS 文件代码以进行调试。您可以检查这个答案以获取方法列表。

您还可以使用Requestly Chrome扩展的重定向规则将生产文件URL替换为localhost文件URL，这会加载我的本地JS而不是生产JS。

步骤如下：

1. 创建源条件为

   production.url/path/to/file/a.js

的替换规则
2. 在 重定向至 字段下输入

   localhost:3000/path/to/file/a.js

3. 保存它将开始将您选择的生产 JS 文件重定向到

   localhost

   JS 文件。

如果您没有本地设置，您可以在 Requestly 中创建文件模拟。

Answer 6

基于快照，以下是在 Chrome DevTools 中模拟或检查 API 数据的分步指南：

1. 打开 DevTools 并转到网络面板。右键单击请求并选择“覆盖内容”。

2. 如果需要，选择一个文件夹来存储覆盖并授予 DevTools 访问权限。

3. 修改 API 响应。

4. 刷新页面以应用更改。