=Start=
缘由：
之前记录过一篇《如何动态修改页面的css/js内容》的文章，里面介绍的是使用Chrome浏览器插件的形式进行修改，但那个方案有一个问题在于有些js脚本一旦提前执行了之后，有些内容/状态就没法改了（或者改了之后会被监控到又重新加载导致修改的效果失效），最近又发现了一种使用Chrome浏览器自带功能实现实时修改css/js文件内容的功能，适用性更强，依赖更少。简单记录一下关键点，方便以后参考。
正文：
参考解答：
在Chrome 65以前，我们可以打开目标网页的 开发者工具 — Sources选项卡 – Page子选项卡 – 选中目标js/css文件，然后在相关位置写入代码保存后即可看到改动后的效果。Chrome 65之后可以借助于「本地代码替换(Local Overrides)」这个特性来实现更强的效果。这里就简单记录一下如何在Chrome中用本地代码替换在线代码，以达到在线修改js/css的效果。
设置「Local Overrides」的步骤：
- 打开「开发者工具」；
- 打开 Sources 选项卡；
- 打开 Overrides 子选项卡；
- 点击 「Select folder for overrides」；
- 选择你存放了提换用的js/css文件所在的本地目录（本地的目录结构需要和原始js/css文件所在目录相一致，否则会不生效）；
- 在你视角的顶部（网址栏下方），点击「允许/allow」给予DevTools相应目录完全的访问权限（give DevTools read and write access to the directory）；
- 重新刷新页面以验证效果（如果没有的话可能需要在Network选项卡那里开启「Disable cache」的功能，否则页面用的一直是cache而不是我们准备的文件）。
几点补充：
在线替换js/css等文件的常用场景：
1、开发/测试用于验证或测试代码的修改效果；
2、搭建一个本地的静态网页服务器；
3、提升网站访问速度（比如将被墙的一些文件替换成本地的文件）；
浏览器的工作流程：
- 通过浏览器向服务器发送请求；
- 服务器接收请求，然后将响应数据返回到终端（电脑/手机/pad/…）；
- 浏览器对终端接收到的数据进行加载渲染。
使用诸如Fiddler、BurpSuite等代理的方式是在上面的第2步对服务器返回的内容做修改，然后传给浏览器进行加载渲染；
这里和之前介绍的方案，是在第3步在浏览器进行渲染之前对内容进行修改以达到目标效果。
参考链接：
What’s New In DevTools (Chrome 65) | Web | Google Developers
https://developers.google.com/web/updates/2018/01/devtools#overrides
Using Local Overrides in DevTools
https://www.afasterweb.com/2018/04/19/using-local-overrides-in-devtools/
如何在chrome中实时修改JS攻略教程_chrome入门基础知识
https://wanghi.cn/202003/17933.html
chrome 开发者工具 – local overrides
https://segmentfault.com/a/1190000016612065
Chrome Local Override 本地文件替换
https://ganlvtech.github.io/2018/10/15/chrome-local-override/
Chrome Dev Tools的几点小技巧
https://www.cnblogs.com/cby-love/p/11711280.html
Chrome Devtools 高级调试指南（新）
https://my.oschina.net/u/4585038/blog/4395292
聊聊Chrome DevTools中你可能不知道的调试技巧
https://zhuanlan.zhihu.com/p/42059158
使用fiddler本地代理替换js文件
https://blog.csdn.net/weixin_39966065/article/details/99331857
彻底搞定反调试之无限debugger
https://www.jianshu.com/p/38c4afae636c
=END=