by：沐沐
背景
面对一些线上环境bug，往往需要经历下面的流程：
- 查看线上报错，定位位置
- 查看源码，确定问题大致原因
- 确定：代码问题很明确，或者数据问题等，可以直接修复，可以快速结束验证
- 不太确定：需要尝试一些方案进行修复，需要进入验证流程
- 开发环境运行代码，开发环境复现
- 开发环境验证，代码review入库
- 打包部署到线上环境
但是这样一套下来还是比较花费时间的，尤其验证过程比较麻烦，如果是一些特殊场景（比如你领导或测试同学电脑复现了，你本地却迟迟复现不出来）才有的问题，可能复现都会花费很多时间。
很多场景会很期望：是否能够直接修改代码，然后让对应环境的浏览器直接跑本地代码，不从服务器上拉代码了，那么就能快速验证，验证通过了快速走上线流程。
一次意外发现，chrome dev-tools 本身就支持，真的很惊喜，急切来尝试。
解决方案
-
本地新建一个空的文件夹，作为线上代码存储地址
-
打开 dev-tools → Source → Overrides → + Select folder for overrides，然后选择第一步创建好的文件夹
-
由于权限问题，浏览器顶部弹出权限确认，点击“允许”即可
-
这时候会发现，下面多了一个文件夹，记得勾选“Enable Local Overrides”
-
保存线上代码到本地目录
-
会发现本地目录里多了文件，并且有图标提示
-
可以本地尽情的编辑了对应文件了，现在线上已经开始运行本地下载文件，而不是线上文件
-
快速验证成功，走快速上线流程，后面就可以放心的慢慢查找原因，本地代码修复了。
总结
会发现，这一套：
- 很多时候更适用于紧急情况，或者很难复现的场景
- 需要编辑的是线上打包后的代码
- 只能应对一些修复比较简单的场景
前端岗位不断招聘中，一起来做更好的用户体验，欢迎来撩：yan.zheng@qingteng.cn
