如何通过Chrome开发者工具调试自动跳转前的页面资源

以下操作均不需要安装额外插件，全部在Chrome自带开发者工具内完成，按操作便捷度排序：

• 方法1：断点冻结页面跳转前状态，直接调试页面A
  1. 打开DevTools切换到Sources面板
  2. 找到侧边栏的Event Listener Breakpoints（事件监听器断点）展开项
  3. 展开Load分类，勾选beforeunload；如果是JS直接调用location相关API触发的重定向，额外展开Script分类，勾选Script First Statement
  4. 刷新页面，JS执行到重定向逻辑触发前会自动进入断点暂停，页面会停留在A的加载完成状态，不会跳转到B。此时可以直接在Network面板查看a.html、a.js的完整请求响应，也可以直接在Sources面板给a.js的业务逻辑加断点调试。
• 方法2：开启网络日志磁盘持久化，解决响应数据被清除的问题
  「Failed to show response data」错误的本质是页面跳转到B后，页面A的渲染进程被系统回收，存在内存里的响应内容被清空，只保留了请求日志条目。按以下配置可以避免这个问题：
  1. 打开DevTools后按F1调出DevTools自身的设置面板（不是Chrome浏览器的全局设置）
  2. 在Preferences标签下找到Network分类，勾选Record network log to disk
  3. 回到Network面板，确认已勾选Preserve log选项
  4. 刷新页面完成跳转后，直接在Network面板的请求列表里找到a.html、a.js的请求条目，点击即可查看完整响应内容，不会再出现数据丢失的提示。
• 方法3：本地替换重定向逻辑，让页面A停留在当前页不跳转
  如果需要反复调试页面A的逻辑，可以用资源替换功能直接屏蔽重定向代码：
  1. 打开DevTools切换到Sources面板，找到二级tab里的Overrides项
  2. 选择一个本地空文件夹作为替换资源的存储目录，按提示给DevTools开放该文件夹的读写权限
  3. 切到Network面板找到a.js请求，右键选择Override content，DevTools会自动拉取a.js的内容到本地替换列表
  4. 在自动弹出的编辑页里，注释掉a.js中触发页面跳转的代码（比如location.href = 'b.html'、location.replace('b.html')这类逻辑），按Ctrl+S保存
  5. 刷新页面，此时会加载你修改后的本地版a.js，不会触发重定向，可以随意调试页面A的所有资源和逻辑。

补充说明：如果是服务端返回3xx状态码触发的跳转（不是a.js执行的前端重定向），只需要开启上述的网络日志磁盘持久化+Preserve log，不需要断点就能直接查看跳转前的所有页面A资源。

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