admin管理员组

文章数量:1534194

介绍一个简单实用的小技巧。我们可以通过Chrome将一些请求网络资源的文件代理请求到本地,这样我们就可以在本地的被代理的代码文件中加入一些自定义的脚本或者其他信息来辅助我们做一些事情。

场景

我们举一个例子,以京东网站为例,我们打开京东首页,可以看到会请求一个入口页面。

我们将这个页面代理到本地,并加入一些其他的脚本

创建本地覆盖目录

选择源代码->替换点击下面的【选择防止替换的文件夹】

选择本地事先准备的一个单独目录,出现下面弹框的时候点击云允许即可。
点击允许之后,下册就会出现我们选择的目录,这里是overwrite目录,可以看到现在暂时是一个空目录。

源代码替换

之后我们回到网络面板下面,选择我们想要代理到本地的网络资源,在这里是这个入口index.html.我们右键单击,然后选择保存并覆盖。

选择之后会自动跳转到源代码面板下,此时我们发现,原本的overwrite文件夹中已经新增了一个目录www.jd/index.html文件。并发现原本网络面板旁边也多了一个黄色的感叹号,此时原本从网络资源请求的index.html已近改为从本地请求了。

修改代理文件

我们可以在vscode中修改overwirte/www.jd/index.html文件,然后重新刷新浏览器。

这里比如我们修改了一个是网页的标题,一个是插入一段js脚本,然后我们刷新浏览器。

可以看到jd这个站点的title和控制台分辨输出了我们自定义的内容

清楚

我们要恢复正常的网络请求只需要将代理的文件在源代码面板删除即可


点击右上侧的删除按钮之后,发现下面被代理的文件已近被清除了,右侧网络面板中的黄色感叹号也没有了,此时再刷新页面,资源就恢复正常了。

本文标签: 脚本浏览器工具chrome