emmet livestyle插件(實(shí)時(shí)預(yù)覽前端編輯器)

emmet livestyle編程輔助插件是一款通過(guò)該在谷歌瀏覽器中讓你實(shí)現(xiàn)高效的前段css編輯功能的插件，為你帶來(lái)最快速的開(kāi)發(fā)體驗(yàn)，其體積十分小巧，是前段開(kāi)發(fā)工程師們必備的可視化編程器，需要結(jié)合Subliem Text插件一同使用，快來(lái)綠色資源網(wǎng)下載吧！

emmet livestyle官方介紹

LiveStyle是Chrome中提高開(kāi)發(fā)效率的一款CSS編輯器插件。利用LiveStyle和Sublime Text3編輯器結(jié)合可實(shí)現(xiàn)可視化開(kāi)發(fā)，一次配置，簡(jiǎn)單易用！

emmet livestyle軟件特色

1. 即時(shí)更新（不會(huì)重新加載頁(yè)面，樣式修改以后無(wú)需保存也能預(yù)覽)；；

2. 多個(gè)頁(yè)面同時(shí)預(yù)覽（例：同時(shí)打開(kāi)多個(gè)頁(yè)面，并且關(guān)聯(lián)到相同的CSS，此時(shí)修改該CSS，這些頁(yè)面都能即時(shí)顯示修改內(nèi)容）；

3. 雙向修改（在Chrome開(kāi)發(fā)者工具和Sublime Text中，只要有一處修改，兩個(gè)工具的樣式都會(huì)更改。）

4. 便捷的安裝和使用。

注：LiveStyle和Emmet一樣，需要PyV8插件的支持。建議先安裝Emmet，因?yàn)榘惭bEmmet的同時(shí)會(huì)自動(dòng)安裝PyV8。

emmet livestyle插件使用方法

安裝Subliem Text插件：

1. 打開(kāi)命令面板：ctrl + shift + p

2. 輸入：install Package

3. 搜索：LiveStyle

使用說(shuō)明

注：LiveStyle和Emmet一樣，需要PyV8插件的支持。建議先安裝Emmet，因?yàn)榘惭bEmmet的同時(shí)會(huì)自動(dòng)安裝PyV8。

1. Sublime Text中打開(kāi)該頁(yè)面的CSS文件。如果是遠(yuǎn)程修改，可以新建個(gè)CSS文件(例：debug.css)。

2. 打開(kāi)需要調(diào)試的頁(yè)面，按F12(打開(kāi)開(kāi)發(fā)者工具)，選擇LiveStyle(在Console/控制臺(tái)右邊)。

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

4. 選擇對(duì)應(yīng)的樣式，即關(guān)聯(lián)CSS。

注：此時(shí)Chrome的Matched CSS Rules和Sublime Text的修改都會(huì)雙向同步。