2016
Dec
05

網頁好讀版


一個前端工程師,每天都要重覆的切換瀏覽器與編輯器,先在編輯器上修改 Style,再儲存檔案,還要再切換到瀏覽器,並重新整理頁面,才能看到瀏覽器頁面上的變化,有時候只是調整文字的行高與間距,就要重覆一次這樣的動作,現在只要安裝了 Browser Refresh 這個 Sublime 外掛,就可以減化這個動作,加快前端開發的時間,可以早點回家陪老婆、小孩。

Browser Refresh 這個外掛目的就是要減少前端工程師不間斷的重覆行為,安裝這個 Plugin 可以大大的加快開發速度,Browser Refresh 整合幾個步驟:儲存檔案,切換到瀏覽器,重新整理頁面,把這三個步驟整合成一個快捷鍵,你只要按 “Ctrl + Shift + R”,三個需求一次滿足。

合併以下三個動作:

  • Sublime 儲存檔案
  • 切換到瀏覽器
  • 重新整理頁面

如何安裝 Browser Refresh

安裝方式很簡單,先打開你的 Sublime ,選擇 Preferences Packages Control ,等 Sublime 跳出一個小視窗後,選擇 install packages ,再搜尋 Browser Refresh ,點擊這個外掛後, Sublime 就會自動幫我們安裝。

裝好之後,要注意先打開你要編輯的 HTML 跟 CSS 檔案,再到瀏覽器打開 HTML 頁面,這樣就完成了 Sublime 與瀏覽器之間的連動,接下來只要你有修改 HTML 或是 CSS ,按一下 "Ctrl + Shift + R" ,就可以馬上看到瀏覽器上樣式的變化。

修改 Browser Refresh 熱鍵

如果你不喜歡 Browser Refresh 預設的熱鍵,那麼我們也可以自已定義熱鍵,首先打開 Preferences Package Settings Browser Refresh Key Bindings - User,Sublime 會自動打開一個個人化的空白設定檔。

接著我們就可以輸入自訂的熱鍵,例如我想要用 Ctrl + R 來取代 Ctrl+Shift +R ,那麼我可以這樣寫:

Browser Refresh 熱鍵
  1. [
  2. {
  3. "keys": ["ctrl+r"], "command": "browser_refresh", "args": {
  4. "auto_save": true,
  5. "delay": 0.0,
  6. "activate": true,
  7. "browsers" : ["chrome"]
  8. }
  9. }
  10. ]

網頁好讀版