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

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

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

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

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


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

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

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


简直是飞一般的感觉 lol

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,293评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,941评论 25 709
  • 有些情绪就值得宣泄,有些故事就应该写完,有些地方就喜欢一个人走。 四季如春,阳光有些过分热情,一不小心脸颊看起来像...
    艾文洱阅读 1,930评论 2 5
  • 昨天没有写意味着今天一定要写两篇。前端时间办公室里莫名其妙的讨论了林丹出轨的事情,由于我们办公室女同胞占绝大多数,...
    起风了的简书阅读 1,475评论 0 0
  • 75. Sort Colors Given an array with n objects colored red...
    juexin阅读 2,600评论 0 0