Web前端工具——Live Reload – Chrome扩展

摘要

        Live Reload 是一个旨在提升web前端开发者开发效率的chrome扩展。当你在心爱的编辑器中更新页面资源（html,js,css）的时候，Chrome浏览器会自动获取最新的文件并从新载入，避免开发过程须要频繁按 F5 页面的烦恼。特别适合在双屏环境下进行 web 前端开发，没必要在编辑器和浏览器之间不停的切换，大大提高开发体验。

前言

       在过去很长的一段时间内，Firefox和Firebug绝对是前端开发者必备的神器，它们的确给咱们开发调试带来极大便捷。近几年，Chrome以其优良的架构、基于JS插件机制、跑分各类给力的表现，吸引众多普通者用户和开发者的眼球，都纷纷投入它的怀抱。最新版Webkit开发者工具已经基本可以胜任开发工做，相信已经有不少开发者已经从Firefox切换到Chrome进行开发。据不彻底统计，AlloyTeam大部分红员已经把开发工具切换成Chrome了^_^。

你们在进行前端页面开发初期的时候，都会出现如下杯具的场景：

        场景1：切换到你喜好的编辑器，在HTML页面添加一个节点，到Css中添加样式，切换到你喜好的浏览器，按F5刷新，发现样式不满意，再次切换编辑器，以后循环…

        场景2：在HTML页面添加一个节点，到Css中添加样式，切换到你喜好的浏览器，打开开发者工具，对样式、节点进行微调，满意以后，Ctrl+c，Ctrl+v把开发者工具的最新内容保存到源代码中…

         不管是场景1仍是场景2都很使人蛋疼，F5按多了（ps：chrome的按F5以后都会卡个几秒，再发新请求刷新页面），就会想有没有办法偷懒呢？人家哲学家都说了，偷懒是推进人类技术发展的动力。若是可以在编辑代码后，在浏览器马上看到效果，所见即所得，那可能能够在开发初期带来不错的开发体验，特别是那些有两个显示器的开发者，根本不须要切换。经过一番搜索，发现Chrome Store上面已有相似的应用，好比Css Auto Reload，Css Refresh，Live Page等，可是功能上以为仍是能够作得更完整些，因而，就考虑参考后另起炉灶，本身搞一个叫Live Reload。

Live Reload简介

         简介参考开头摘要，简单来讲，就是一个帮助你在开发初期，让浏览器自动加载编辑器修改过的新文件，不用一直F5的的chrome插件。实现的思路很简单，就是监控服务器的HTML/JS/Css文件是否更新，若是就触发浏览器自动从新加载。

         Chrome Store安装地址:https://chrome.google.com/webstore/detail/pccddenngcbofbojodpghgpbheckgddn

        Github项目地址: https://github.com/rehorn/chrome-live-reload

Live Reload特性：

• 只须要安装一个 chrome 插件，不须要特殊的服务器端支持
• 启用实时更新模式后，可以自动从新载入 html/js/css 等资源更新
• 不启用实时更新模式，也可以经过按 F9 来手动从新载入 css 文件
• 支持本域和跨域资源的实时更新，能够经过配置项只监控本域资源更新
• 支持从新载入页面的时候，保留页面滚动条位置
• 页面的资源支持相对路径，绝对路径
• 能够经过 F8 来启用【显示页面节点 id,class 信息】功能，便于开发过程当中在编辑器快速定位
• 提供启用Live Reload的页面管理界面
• 可以经过配置选择监控的资源类型和频率

 

暂不支持：

• 因为 chrome 安全机制，暂不支持经过 file:// 打开的页面
• 不支持页面中的 iframe 内资源的变化
• 没法监控 CSS 中使用 import 引入其它 CSS 的状况

使用方法

• 先安装 Live Reload 扩展，能够经过 chrome store 安装，也能够下载后拖入浏览器手动安装
• 安装后扩展栏会出现一个 Live Reload 图标 
• 把正在开发的页面资源部署一个 Web 服务器上
• 能够选择在本机架构 Apache/Nginx/IIS/Tomcat 等专业服务器
• 若有 Python 运行环境，能够经过在页面根目录执行 python -m SimpleHTTPServer 8999 快速架构服务器
• 能够选择配合 Fiddler/Rythem 等本地替换工具进行开发（强烈推荐^_^）
• 在 chrome 地址栏内输入页面地址，能够经过点击 Live Reload 图标，来启用实时监控模式
• 在你最喜欢的编辑器中修改页面资源内容后，能够看到页面上已经更新
• 能够再次点击 Live Reload 图标，图标变灰，不启用实时监控模式
• 能够经过按 F8 来启用/隐藏(F8/ESC)【显示页面节点 id,class 信息】功能，便于开发过程当中在编辑器快速定位
• 能够经过按 F9 来手动更新页面 CSS 资源
• 能够在 Live Reload 图标右击，选择选项，能够在配置页面上面设置相关参数
• 设备容许的状况下，推荐使用双显示器进行工做，将 chrome 放在副屏幕，代码编辑器在主屏幕，编辑后当即以预览效果
• 设备不容许，能够选择使用小工具将 chrome 窗口置顶或者将编辑器和 chrome 窗口进行左右分栏