不改代码、不改服务器，使用 Chrome Overrides 调试线上页面

一、背景

在日常开发过程中，经常遇到这些场景：

线上页面出现 Bug，但无法直接修改代码验证
后端接口数据不方便修改，需要模拟异常场景
想快速验证前端某个逻辑调整
第三方页面无法修改源码，需要临时替换资源

通常解决方式：

修改本地代码重新部署
等待后端提供测试数据
使用 Mock 服务

但 Chrome DevTools 提供了一个隐藏功能：

Overrides（替换），可以将网络资源映射到本地文件，并自动替换浏览器加载内容。

二、什么是 Chrome Overrides

Chrome Overrides 是 DevTools 的一个功能：

官方文档：devtools/overrides

它允许：

服务器资源
↓
Chrome 请求
↓
本地文件替换
↓
浏览器加载修改后的内容

整个过程：

• 不修改服务器
• 不修改代码仓库
• 不影响其他用户
• 只作用于当前浏览器

三、开启 Overrides

在Chrome中按F12打开控制台，如下图选择：源代码/来源 -> 替换 -> 选择放置替换项的文件夹，浏览器会请求权限，点击允许，然后选择一个本地目录。

四、替换文件

在网络请求中选择想要替换的请求，右键可用选择替换内容，替换标头。

如图我选择了本机的一个bin目录，此时该目录下会有实际要替换域名的目录。

只需要将要替换的文件放到本机对应目录即可。

特别注意，有时候只更新文件可能不生效，还需要修改标头的etag，确保浏览器加载了新的本机文件。如下图所示，右键对应请求点击替换标头，此时响应头的值可以编辑，把etag内容随便改一下，记得勾选停用缓存，然后刷新浏览器页面（或者按Ctrl+Shift+R,或者鼠标左键长按浏览器左上角刷新按钮然后选择清理缓存并硬性重新加载），总之就是强制浏览器刷新页面获取新的文件，替换的文件会用本机目录的文件。

对应域名的替换文件生效时图标和普通请求的有区别。

五、取消替换

暂时取消可以把本地替换前面的勾去掉，永久取消可以点击本地替换右边的清除配置按钮。