三款 chrome 插件打造飞一般的前端开发环境

admin

三款 chrome 插件打造飞一般的前端开发环境


前端开发都知道，修改 css 和 js 代码简直比眨眼频率还要更高。为了能保持节奏提高效率，一般都会把环境部署到本地。

如果前后端团队完全分离，前端环境只是一个 web server 甚至直接访问文件系统就能搞定。但是大部分情况两者没法完全分离，前端的样式和交互需要依附在后端的内容上。于是后端的各种语言、db、cache 等组件都需要一并部署。产品越大环境也就越复杂，想部署也是有心无力。不过一般公司内网速度也不慢，用开发服务器也能接受。

但是对于假期在家加班的五好童鞋来说就完全不是这么回事，生产环境下前端文件有 CDN 加速倒是没啥影响。开发时禁掉缓存每次全部重新加载，按个 F5 恨不得下楼溜一圈。好在发现了 chrome app/extension 完美解决的方案，心情简直不能更好。

整个方案很简单，只需三部即可完成。每部分所需的插件及用法如下：

部署文件系统的代码到本地服务器
使用 web server for chrome，选中目标目录就部署成功，相当简单。

下载地址：

1. https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

复制代码

将指定路径的 http request 重定向到本地服务器
使用 Switcheroo Redirector，只需分别填写目标地址和对应的本地服务器地址即可，如果前端的代码单独部署在独立域名或目录的话，两个字符串就能搞定。
下载地址：

1. https://chrome.google.com/webstore/detail/switcheroo-redirector/cnmciclhnghalnpfhhleggldniplelbg

复制代码

修改 response header 允许跨域资源访问
使用 Allow-Control-Allow-Origin: *，默认会修改所有 response，安全起见最好限定本地服务器。（ 如果产品不需要访问跨域资源的话，这步都可以省略 ）
下载地址：

1. https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

复制代码

简直是飞一般的感觉 lol

访问谷歌插件，要科学上网的。