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 窗口進行左右分欄