emmet livestyle插件(實時預覽前端編輯器)

emmet livestyle編程輔助插件是一款通過該在穀歌瀏覽器中讓你實現高效的前段css編輯（jí）功能的插件（jiàn），為你帶來最快速的開發體驗，其體積（jī）十分小巧，是前段開發工程師們必備的可視化（huà）編程器，需要結合Subliem Text插件一同使用，快來綠（lǜ）色資源網下載吧！

emmet livestyle官方介紹

LiveStyle是（shì）Chrome中提高（gāo）開發效率的一款CSS編輯器插（chā）件。利用LiveStyle和Sublime Text3編輯器結合可實（shí）現可視化開發，一次配置，簡單易用！

emmet livestyle軟（ruǎn）件特色

1. 即時更新（不會重新加載頁麵，樣式修改（gǎi）以後無需保存也能預覽)；；

2. 多個頁麵同時預覽（例：同時打開多個（gè）頁麵（miàn），並且關聯到相同的CSS，此時修改（gǎi）該CSS，這些頁麵都能即時顯示（shì）修改內容）；

3. 雙向修改（在Chrome開發者工具和Sublime Text中，隻要有一處修改，兩個工具的樣式都會更改。）

4. 便捷的安裝（zhuāng）和使用。

注：LiveStyle和Emmet一（yī）樣，需（xū）要PyV8插件的支持（chí）。建議先安（ān）裝（zhuāng）Emmet，因為安裝Emmet的同時會（huì）自動安裝PyV8。

emmet livestyle插件使用方法

安裝Subliem Text插件：

1. 打開命令麵板：ctrl + shift + p

2. 輸入（rù）：install Package

3. 搜索：LiveStyle

使用說明

注：LiveStyle和Emmet一樣，需要（yào）PyV8插件的支持。建議先安裝Emmet，因為安裝Emmet的同時會自動安裝PyV8。

1. Sublime Text中打（dǎ）開該頁（yè）麵的CSS文（wén）件。如果是遠程修改，可以新建個CSS文件(例：debug.css)。

2. 打開需要調試的頁麵，按F12(打開（kāi）開發者工具（jù）)，選擇LiveStyle(在Console/控製台右（yòu）邊)。

3. 把Enable LiveStyle for current page前麵的勾打上。

4. 選擇對應的樣式，即關聯CSS。

注：此時Chrome的Matched CSS Rules和Sublime Text的修改都會雙向（xiàng）同步。