Web前端工具——LiveReload–Chrome扩展

摘要

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

前言

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

大家在进行前端页面开发初期的时候&＃xff0c;都会出现以下杯具的场景&＃xff1a;

        场景1&＃xff1a;切换到你喜爱的编辑器&＃xff0c;在HTML页面添加一个节点&＃xff0c;到Css中添加样式&＃xff0c;切换到你喜爱的浏览器&＃xff0c;按F5刷新&＃xff0c;发现样式不满意&＃xff0c;再次切换编辑器&＃xff0c;之后循环…

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

         无论是场景1还是场景2都很令人蛋疼&＃xff0c;F5按多了&＃xff08;ps&＃xff1a;chrome的按F5之后都会卡个几秒&＃xff0c;再发新请求刷新页面&＃xff09;&＃xff0c;就会想有没有办法偷懒呢&＃xff1f;人家哲学家都说了&＃xff0c;偷懒是推动人类技术发展的动力。如果能够在编辑代码后&＃xff0c;在浏览器立刻看到效果&＃xff0c;所见即所得&＃xff0c;那可能可以在开发初期带来不错的开发体验&＃xff0c;特别是那些有两个显示器的开发者&＃xff0c;根本不需要切换。通过一番搜索&＃xff0c;发现Chrome Store上面已有类似的应用&＃xff0c;比如Css Auto Reload&＃xff0c;Css Refresh&＃xff0c;Live Page等&＃xff0c;但是功能上觉得还是可以做得更完整些&＃xff0c;于是&＃xff0c;就考虑参考后另起炉灶&＃xff0c;自己搞一个叫Live Reload。

Live Reload简介

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

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

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

Live Reload特性&＃xff1a;

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

暂不支持&＃xff1a;

• 由于 chrome 安全机制&＃xff0c;暂不支持通过 file:// 打开的页面
• 不支持页面中的 iframe 内资源的变化
• 无法监控 CSS 中使用 import 引入其它 CSS 的情况

使用方法

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