瀏覽器 網頁開發 網頁設計 軟體

[外掛] 前端開發神器 Emmet LiveStyle 即時修改網頁樣式,即時預覽畫面

2019/06/19

梅問題-[外掛]前端開發神器 Emmet LiveStyle 即時編輯網頁即時預覽畫面
  對於許多有經驗的網頁設計師而言,當要調整網頁樣式時,最常用的方法就是,透過Chrome瀏覽器的開發人員工具,將要調整的樣式,加到開發人員工具的右下角的Styles面板中,就可即見即所得的預覽結果畫面,這是一個相當快速且簡易的方法,但這個方法有個小缺點就是,一旦重新整理網頁就不見,或一次修改太多樣式,就不易尋找與拷貝。

  因此最近梅干發現一個超棒的Chrome外掛,且搭配Sublime後,就可實現即見即所得的效果,甚至重新整理頁面也不會不見,同時還可以修改在線網頁,是一個相當好用的外掛,因此身為網設的你Emmet LiveStyle這套件,絕對不容錯過,至於要怎麼用,現在就一塊來看看吧!


Emmet LiveStyle
外掛名稱:Emmet LiveStyle
外掛下載:Chrome商店
輔助工具:http://livestyle.io/

Step1
首先,進到Emmet LiveStyle的外掛頁面後,點一下「加到Chrome」鈕,再點「新增擴充功能」鈕。
梅問題-[外掛]前端開發神器 Emmet LiveStyle 即時編輯網頁即時預覽畫面
Step2
當安裝完畢後,在網址列後方,會出現Emmet的小圖示。
梅問題-[外掛]前端開發神器 Emmet LiveStyle 即時編輯網頁即時預覽畫面
Step3
接著再到輔助工具的LiveStyle頁面,點下方的「Download App」鈕。
梅問題-[外掛]前端開發神器 Emmet LiveStyle 即時編輯網頁即時預覽畫面
Step4
下載完畢解壓縮後,接著再點一下「Install Sublime Text 3 plugin」,而這隻外掛需搭配Sublime Text的編輯器。
梅問題-[外掛]前端開發神器 Emmet LiveStyle 即時編輯網頁即時預覽畫面
Step5
當都安裝完畢後,分別會看到綠色勾勾。
梅問題-[外掛]前端開發神器 Emmet LiveStyle 即時編輯網頁即時預覽畫面
Step6
接開啟製作的專案頁面,再點Emmet的小圖示,再按ON將它開啟。
梅問題-[外掛]前端開發神器 Emmet LiveStyle 即時編輯網頁即時預覽畫面
Step7
這時將專案的CSS檔,開啟到Sublime Text的編輯器中,這時再瀏覽器的Emmet的面板中,將style.min.css的下拉選單中,選擇style.min.css也就是Sublime Text中的CSS檔。
梅問題-[外掛]前端開發神器 Emmet LiveStyle 即時編輯網頁即時預覽畫面
Step8
當選定好後,就可開始調整CSS的樣式。
梅問題-[外掛]前端開發神器 Emmet LiveStyle 即時編輯網頁即時預覽畫面
Step9
這時只要即時修改CSS的樣式,在不用儲存的情況下,瀏覽器就會立即的顯示修改的結果。
梅問題-[外掛]前端開發神器 Emmet LiveStyle 即時編輯網頁即時預覽畫面
Step10
最酷的在這邊,當今天瀏覽已上線的網頁,接著開啟Sublime Text並新增一個檔案,再將文件類型設為CSS
梅問題-[外掛]前端開發神器 Emmet LiveStyle 即時編輯網頁即時預覽畫面
Step11
接著一樣將瀏覽器中的Emmet圖示設為on,這時在樣式的下拉選單中,就會看到一個未命名的文件名稱。
梅問題-[外掛]前端開發神器 Emmet LiveStyle 即時編輯網頁即時預覽畫面
Step12
選擇後,這時瀏覽器中的樣式,就會與Sublime Text中的檔案聯動。
梅問題-[外掛]前端開發神器 Emmet LiveStyle 即時編輯網頁即時預覽畫面
Step13
這時當在Sublime Text新增或修改任何的樣式,瀏覽器也會即時顯示,更棒的是即便是重新整理頁面,那些設定檔也不會不見,真是相當好用,因此身為一位專業的網頁設計師,這隻Emmet LiveStyle的外掛套件,可千萬別錯過了。
梅問題-[外掛]前端開發神器 Emmet LiveStyle 即時編輯網頁即時預覽畫面