Chrome Local Override 本地文件替换

问题#

  1. 我们修改前端的时候,经常遇到一种情况。本地的测试服务器的数据并不是很充足,很多情况是线上的数据引发的问题,如果把线上的数据离线下来会很麻烦。

  2. 比如,我帮别人改他的网站的 js、css,我并不能访问他的数据库。如果我想模拟线上环境,要么爬取数据,要么自己生成假数据。

  3. 还有,如果我想改别人网站的 js 代码,想简单调试一下,最后再做一个插件。我并不想把他整个网站都离线下来,然后本地测试。我想做的只是改某一个文件。

  4. 另外,比如 ajax.googleapis.com 被墙了,我想使用 ajax.proxy.ustclug.org 的镜像代替对应的文件。

解决方案#

我大约两年前发现的 gooreplacer。这个 Chrome 插件,这个插件自动把被墙的 GoogleApis 文件,通过 Chrome 提供的 307 Internal Redirect,在发送请求前直接重定向到新地址。然后访问 Stack Overflow 的时候就可以正常加载脚本了。

gooreplacer GitHub repo

gooreplacer Chrome Web Store

Chrome Local Override#

我大约从 Chrome 59 以来,就不止一次在 Bing、Google 搜索这个问题。直到几天前我找到了一篇 Stack Overflow 文章,Override Javascript file in chrome

从 Chrome 65 以来 Chrome’s DevTools 的 Source 页面多了一个 Local Overrides 选项卡。

其他 Chrome 插件#

除了 gooreplacer,上面的 Stack Overflow 回答中还给出了 RequestlyResource Override 等诸多插件。我简单的看了一下他们。

Requestly 这个插件功能很全,能做的事情非常多,还可以改 User Agent 之类的。

Resource Override 这个就很简洁,只能替换 URL,功能其实和 gooreplacer 差不多,只不过替换规则需要自己输入。

另外,安装这些插件之后,Chrome 有同类插件推荐。我才知道,应用商店中这种 URL Redirector 类型的插件这么多。

我没有详细对比过这些插件。因为功能差不多,我倾向于选择开源并且代码简洁,占用资源少的。

插件 v.s. DevTools#

虽然插件是“即插即用”的,这样很方便,但是也有这些插件做不了的事情。那就是跨域。js、css 文件当然不会被 Same-origin policy 所拦截。但是 Ajax 可就不一样了,Ajax GET 的内容会被拦截。通过 Chrome DevTools 提供的 Local Override 功能简单方便快捷,对开发人员友好。