javascript 我可以在Chrome开发工具中模拟我的请求的响应吗?

taor4pac  于 2023-10-14  发布在  Java
关注(0)|答案(4)|浏览(106)

我正在调试只在生产中发生的前端问题。我想知道是否有任何方法可以模拟请求的响应或模拟一些静态文件。
比如说,
当我调用www.example.com时xxx.com,它加载index.htmlindex.html加载a.js。由于Chrome缓存了js,我们是否可以模拟a.js,以便index.html加载模拟的a.js

roejwanj

roejwanj1#

在devtool中无法模拟服务器响应,但有一些Chrome扩展可以帮助实现这一点:我试过其中的7个,但(Tweak)唯一一个能够:
1.拦截所需的URL
1.设置内容类型
1.设置有效载荷

blpfk2vs

blpfk2vs2#

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

kt06eoxx3#

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

oogrdqng

oogrdqng4#

从Chrome 117开始,您可以在本地模拟Web内容。
要覆盖Web内容,请打开“网络”面板,右键单击请求,然后选择“覆盖内容”。
DevTools目前支持以下请求类型的内容覆盖:图像(例如avif、png)、字体、fetch和XHR、脚本(css和js)和文档(html)。DevTools现在格雷显示不支持类型的内容选项。

相关问题