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

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

emmet livestyle官方介紹

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

emmet livestyle軟件特色

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

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

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

4. 便捷的安裝和使用。

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

emmet livestyle插件使用方法

安裝Subliem Text插件：

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

2. 輸入：install Package

3. 搜索：LiveStyle

使用說明

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

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

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

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

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

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