跳转到外部网站后Chrome开发者工具无法查看API调用响应怎么办

该现象属于正常情况 #

当你通过window.location.href触发整页跳转时，浏览器会立即卸载当前页面的所有运行上下文，跳转后的页面属于全新的文档环境，Chrome开发者工具默认会清空跳转前页面的所有请求记录，因此你在跳转后的响应标签页看不到之前的API响应内容，属于浏览器的默认行为，无需担心代码逻辑异常。

你贴出的业务代码逻辑本身没有问题：

endpointFetcher(payload)
      .then((result) => {
        const { token} = result;    
        return window.location.href = `https://mywebsite.com/#/start?genToken=${token}`
      })
      .catch((err) => {
        console.log(err)
      });

保留API响应内容的可用方法 #

• 开启开发者工具的日志持久化功能：打开Chrome开发者工具，点击右上角齿轮图标进入设置页面，勾选「Console」分类下的*Preserve log（保留日志）*选项即可。开启后页面跳转不会清空之前的请求、控制台输出记录，跳转完成后你依然可以在网络面板找到对应的API请求，查看完整响应内容。
• 跳转前暂存响应内容：你可以在拿到result后新增一行console.log(result)，配合「保留日志」功能，跳转后也可以在控制台面板直接查看完整的响应结果。
• 调试阶段临时屏蔽跳转：如果仅需要验证API响应是否正确，可以临时注释掉window.location.href相关代码，等确认响应符合预期后再恢复跳转逻辑即可。

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