我正在调试只在生产中发生的前端问题。我想知道是否有任何方法可以模拟请求的响应或模拟一些静态文件。比如说,当我调用www.example.com时xxx.com,它加载index.html,index.html加载a.js。由于Chrome缓存了js,我们是否可以模拟a.js,以便index.html加载模拟的a.js?
index.html
a.js
roejwanj1#
在devtool中无法模拟服务器响应,但有一些Chrome扩展可以帮助实现这一点:我试过其中的7个,但(Tweak)唯一一个能够:1.拦截所需的URL1.设置内容类型1.设置有效载荷
blpfk2vs2#
您可以使用page.setRequestInterception() + request.respond()尝试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); } })();
kt06eoxx3#
另一个解决方案是npm json-server。它返回存储的JSON在每个请求指定的URL
oogrdqng4#
从Chrome 117开始,您可以在本地模拟Web内容。要覆盖Web内容,请打开“网络”面板,右键单击请求,然后选择“覆盖内容”。DevTools目前支持以下请求类型的内容覆盖:图像(例如avif、png)、字体、fetch和XHR、脚本(css和js)和文档(html)。DevTools现在格雷显示不支持类型的内容选项。
4条答案
按热度按时间roejwanj1#
在devtool中无法模拟服务器响应,但有一些Chrome扩展可以帮助实现这一点:我试过其中的7个,但(Tweak)唯一一个能够:
1.拦截所需的URL
1.设置内容类型
1.设置有效载荷
blpfk2vs2#
您可以使用
page.setRequestInterception()
+request.respond()
尝试puppeteer。大概是这样的:kt06eoxx3#
另一个解决方案是npm json-server。它返回存储的JSON在每个请求指定的URL
oogrdqng4#
从Chrome 117开始,您可以在本地模拟Web内容。
要覆盖Web内容,请打开“网络”面板,右键单击请求,然后选择“覆盖内容”。
DevTools目前支持以下请求类型的内容覆盖:图像(例如avif、png)、字体、fetch和XHR、脚本(css和js)和文档(html)。DevTools现在格雷显示不支持类型的内容选项。