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 回答中还给出了 Requestly、Resource 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 功能简单方便快捷，对开发人员友好。