如何在Chrome DevTools中强制请求缓存？如何让Chrome返回历史请求结果？

嘿，这两个问题我刚好在日常开发里折腾过，给你一步步说清楚怎么操作：

当然可以，有几种实用的方法：

• 基础操作：先打开DevTools的Network面板，确保顶部的「Disable cache」复选框没有被勾选（这个选项默认是禁用缓存的，取消勾选后浏览器会优先读取缓存内容）。
• 精准控制单个请求：如果想针对某个特定请求强制用缓存，可以右键该请求，选择「Copy > Copy as fetch」，然后在Console里粘贴并修改fetch配置，加上cache: 'force-cache'参数，比如：

  fetch('https://your-target-url.com/api/data', { cache: 'force-cache' })
  

  这样发起的请求会直接读取缓存里的内容，不会去服务器验证有效性。
• 复用已缓存的响应：如果之前已经有缓存的响应，你可以在Network面板里找到对应的请求，右键选择「Replay XHR」（针对XHR请求），浏览器会优先尝试用缓存返回结果。

这个需求在开发加载慢的UI时特别实用，推荐两种简单的方法：

方法一：使用Network面板的响应覆盖（Override Response） #

1. 先正常发起一次请求，等响应返回后，在Network面板里找到它，右键选择「Save response」，把响应内容保存到本地文件夹。
2. 打开DevTools的Sources面板，切换到「Overrides」标签，点击「Select folder for overrides」选择刚才保存响应的文件夹，Chrome会提示你授权访问，确认即可。
3. 回到Network面板，找到那个耗时的请求，右键选择「Override response」，选择你刚才保存的本地响应文件。
4. 之后再发起这个请求时，Chrome会直接返回你保存的本地响应，完全不会去请求服务器。

方法二：用Console手动拦截请求（适合临时测试） #

如果你只是临时需要，可以在Console里用Proxy拦截fetch请求，直接返回之前保存的响应：

// 先把上一次的响应内容和头信息存下来
const savedResponseBody = '{"data": "your-previous-response-content"}';
const savedHeaders = { 'Content-Type': 'application/json' };

// 拦截fetch请求
fetch = new Proxy(fetch, {
  apply(target, thisArg, args) {
    // 匹配你的目标请求URL
    if (args[0] === 'https://your-slow-request-url.com/api') {
      return Promise.resolve(new Response(savedResponseBody, {
        status: 200,
        headers: savedHeaders
      }));
    }
    // 其他请求正常发起
    return target.apply(thisArg, args);
  }
});

这样只要请求匹配到目标URL，就会直接返回你预设的响应，完全不用等服务器。

内容的提问来源于stack exchange，提问作者Anthony