=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=