Chrome浏览器Local Overrides踩坑记
Chrome浏览器Local Overrides踩坑记
一、背景
最近后端开发API过程中遇到一个奇怪问题，周末看了一下，发现是自己对Chrome浏览器DevTools的Local Overrides不了解导致的。
问题是这样的。
后端开发时发现一个Restful JSON接口老是返回空的HTTP Body，但是HTTP Response状态码是正常的200。这个是通过Chrome浏览器DevTools观察到的。浏览器渲染当然也是空白页面。
通过对应的“Copy as cURL”请求时HTTP响应体正常。
其他同学的Chrome浏览器访问也正常，页面也能正常渲染。
二、分析
一开始怀疑后端接口问题，因为这个接口返回数据量比较大，有时有性能问题。服务端有时候能观察到“Broken Pipe”类似连接中断的异常。
但是cURL或者页面请求时后端日志中并没有观察到异常日志。排除服务端的原因。
1 | cURL |
因为其他人的浏览器访问正常，应该是我的浏览器设置的问题。
我用Safari浏览器试着访问了一下问题页面，果然正常。问题基本可以定位是Chrome浏览器的问题。
1 | Safari |
1 | Chrome |
但是记不起来自己做过什么特别的设置。
求助AI和搜索引擎，做了一些尝试比如浏览器插件、缓存、无痕模式、浏览器CSP策略等无果。
瞅着DevTools中请求发呆时，看到Response有个紫色点，鼠标停上去发现有个提示The response is overridden by DevTools。感觉这个提示有用。
1 | Response |
1 | The response is overridden by DevTools |
再次问AI，这货仿佛恍然大悟，直接给出了解决方案，正解。
简单来说，原因是DevTools中对这个接口的Response进行了覆盖，而且覆盖的响应体刚好是空！
1 | DevTools |
1 | Response |
一下子记起来几周前找前端同学帮忙解决一个修改前端页面渲染的问题。也就是自定义Restful请求的Response，修改页面渲染内容。当时改动的就是这里。
这个是通过Network->选中请求->override content指定一个本地目录中json文件作为Response来实现的。当时没有使用这个功能就忘了有这件事了。
1 | Network |
1 | override content |
1 | Response |
三、解决方法
解决方案也很简单，删除对应的接口本地文件比如stackedBinMap或者全局不选中Sources->Overrides->Enable Local Overrides即可。
1 | stackedBinMap |
1 | Sources |
1 | Overrides |
1 | Enable Local Overrides |
补充，DevTools中本地文件名和Restful接口名是一一对应的。不需要直接删除本地文件就可以了。通过Network->选中请求->override content可以自动生成本地文件，我们可以修改这个文件内容，比如JSON内容，改变前端页面渲染内容。
1 | DevTools |
1 | Network |
1 | override content |