如何实时修改css/js文件的内容?

=Start=

缘由:

之前记录过一篇《如何动态修改页面的css/js内容》的文章,里面介绍的是使用Chrome浏览器插件的形式进行修改,但那个方案有一个问题在于有些js脚本一旦提前执行了之后,有些内容/状态就没法改了(或者改了之后会被监控到又重新加载导致修改的效果失效),最近又发现了一种使用Chrome浏览器自带功能实现实时修改css/js文件内容的功能,适用性更强,依赖更少。简单记录一下关键点,方便以后参考。

正文:

参考解答:

在Chrome 65以前,我们可以打开目标网页的 开发者工具 — Sources选项卡 – Page子选项卡 – 选中目标js/css文件,然后在相关位置写入代码保存后即可看到改动后的效果。Chrome 65之后可以借助于「本地代码替换(Local Overrides)」这个特性来实现更强的效果。这里就简单记录一下如何在Chrome中用本地代码替换在线代码,以达到在线修改js/css的效果。


设置「Local Overrides」的步骤:

  1. 打开「开发者工具」;
  2. 打开 Sources 选项卡
  3. 打开 Overrides 子选项卡
  4. 点击 「Select folder for overrides」;
  5. 选择你存放了提换用的js/css文件所在的本地目录(本地的目录结构需要和原始js/css文件所在目录相一致,否则会不生效);
  6. 在你视角的顶部(网址栏下方),点击「允许/allow」给予DevTools相应目录完全的访问权限(give DevTools read and write access to the directory);
  7. 重新刷新页面以验证效果(如果没有的话可能需要在Network选项卡那里开启「Disable cache」的功能,否则页面用的一直是cache而不是我们准备的文件)。

先通过Page选项卡确定文件的位置和目录结构
选择目录的一个注意事项
当Overrides生效了之后的一个效果(注意标注出来的那2个图标)

几点补充:

在线替换js/css等文件的常用场景:

1、开发/测试用于验证或测试代码的修改效果;
2、搭建一个本地的静态网页服务器;
3、提升网站访问速度(比如将被墙的一些文件替换成本地的文件);

浏览器的工作流程:

  1. 通过浏览器向服务器发送请求;
  2. 服务器接收请求,然后将响应数据返回到终端(电脑/手机/pad/…);
  3. 浏览器对终端接收到的数据进行加载渲染。

使用诸如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=

声明: 除非注明,ixyzero.com文章均为原创,转载请以链接形式标明本文地址,谢谢!
https://ixyzero.com/blog/archives/5040.html

发表评论

邮箱地址不会被公开。 必填项已用*标注