LiveStyle初體驗(yàn)

LiveStyle是css實(shí)時(shí)編輯工具，(它的功能)與流行起來(lái)的工具如LiveReload，CodeKit等類似，這些工具背后的思想很簡(jiǎn)單：你在編輯器中編輯css文件后，保存，然后驚奇的發(fā)現(xiàn)，瀏覽器中的頁(yè)面(指的是前面編輯后保存的樣式文件的頁(yè)面)會(huì)自動(dòng)刷新，會(huì)給你帶來(lái)由于css樣式改變而形成視覺(jué)上的反饋。

絕大多數(shù)的實(shí)時(shí)編輯工具的工作流程都是這樣的：監(jiān)聽(tīng)已知文件夾中文件的更新情況，然后做一些額外的工作(例如，將LESS轉(zhuǎn)成CSS)，最后(將樣式變化的地方)更新到網(wǎng)頁(yè)。這就意味著，你必須要保存你的源文件，然后等待幾秒可以觀察到，細(xì)微的改變?nèi)绾斡绊懩愕捻?yè)面。

LiveStyle開(kāi)啟一種實(shí)時(shí)編輯體驗(yàn)：當(dāng)你在文本編輯器中打字的時(shí)候，(LiveStyle)即時(shí)同步更新網(wǎng)頁(yè)，不用等到文件保存或者頁(yè)面預(yù)加載。并且LiveStyle是第一個(gè)能夠?qū)⒃跒g覽器開(kāi)發(fā)工具欄的變化以正確的方式同步更新到源代碼中

安裝

為了(讓使用者)追求更好的編輯體驗(yàn)，LiveStyle可以直接集成到瀏覽器以及代碼編輯器中。所以你首先要做的第一件事就是安裝瀏覽器以及編輯器插件(目前，只有支持Google Chrome以及Sublime Text)。

最簡(jiǎn)單的方式就是使用LiveStyle應(yīng)用:

1.為你的操作系統(tǒng)下載LiveStyle應(yīng)用(暫時(shí)還不支持Linux，請(qǐng)使用手動(dòng)安裝方法)。

2.解壓然后運(yùn)行。

Windows用戶：當(dāng)你首次運(yùn)行LiveStyle，Windows可能會(huì)請(qǐng)求接入網(wǎng)絡(luò)，請(qǐng)?jiān)试S該請(qǐng)求。在下載插件以及Remote View是需要接入網(wǎng)絡(luò)的。

如果進(jìn)展順利的話，你將會(huì)看到LiveStyle應(yīng)用的界面類似下面這樣：

LiveStyle應(yīng)用的界面可以看到需要獲取的插件以及它們的安裝情況，當(dāng)然也可以看到Remote View會(huì)話列表。點(diǎn)擊安裝按鈕就會(huì)開(kāi)啟安裝的進(jìn)程。

當(dāng)你的瀏覽器以及編輯器都安裝該插件，你可以關(guān)閉LiveStyle應(yīng)用：因?yàn)槟阒挥性赗emote View情況下才需要LiveStyle應(yīng)用。

手動(dòng)安裝

在下載以及運(yùn)行LiveStyle應(yīng)用遇到問(wèn)題時(shí)，你可以嘗試手動(dòng)安裝。

Google chrome插件

1.在Chrome中，瀏覽器地址欄跳轉(zhuǎn)到LiveStyle WebStore page。

2.點(diǎn)擊右上角的添加至Chrome按鈕：

一旦安裝成功后，你將會(huì)在Chrome工具欄看到LiveStyle圖標(biāo)：

Sublime Text插件

安裝Sublime Text插件最簡(jiǎn)單的方法就是通過(guò)Package Control，這是安裝Sublime Text插件比較好的方式：Package Control會(huì)管理所有的插件安裝的流程，為你進(jìn)行自動(dòng)更新。

1.正如描述所說(shuō)的安裝Package Control(如果你到現(xiàn)在還沒(méi)有安裝Package Control)。

2.在Sublime Text中點(diǎn)擊Tools > Command Palette...菜單欄。

3.在彈出的對(duì)話框，輸入install package來(lái)找到Package Control: Install Package菜單欄，用方向鍵進(jìn)行選擇然后敲擊回車。

4.等待幾秒，然后Package Control載入可用的包列表。

5.當(dāng)載入完成，你可以看到帶有可用的包列表的對(duì)話框，輸入livestyle來(lái)找到LiveStyle包，然后敲擊回車。

過(guò)一會(huì)LiveStyle插件就會(huì)成功安裝，你可能會(huì)重啟Sublime Text來(lái)確保所有的東西都正常工作。

手動(dòng)安裝Sublime Text插件

如果你不能或者不想使用Package Control，你可以嘗試完全手動(dòng)安裝：

1.在Sublime Text，選中Preferences > Browse Packages...菜單欄。文件管理器將會(huì)打開(kāi)Package文件夾。

2.在打開(kāi)的Package文件夾中新建LiveStyle文件夾。

3.下載，然后解壓插件代碼歸檔到新建的LiveStyle文件夾。

4.最后，你的文件目錄結(jié)構(gòu)應(yīng)該和下面的類似。

5.重啟Sublime Text。

Atom插件

可以獲取的Atom插件處于beta測(cè)試狀態(tài)，所以必須要手動(dòng)安裝(LiveStyle應(yīng)用不提供安裝源)。

1.在Atom中，跳轉(zhuǎn)到Preferences > Install。

2.搜索livestyle-atom插件，然后安裝。

或者你可以通過(guò)apm安裝：apm install livestyle-atom

使用LiveStyle

在你相繼安裝瀏覽器插件以及編輯器插件后，你就可以開(kāi)始使用LiveStyle。

LiveStyle的所有的設(shè)置都是通過(guò)Google Chrome擴(kuò)展控制的：

LiveStyle彈出框顯示可以在當(dāng)前頁(yè)面獲取的樣式表的列表，每一個(gè)瀏覽器LiveStyle彈出框(當(dāng)前頁(yè)所擁有的)樣式表位置下面是一個(gè)包含所有樣式表(指的是用編輯器打開(kāi)的樣式表)的下拉菜單。為了開(kāi)始使用LiveStyle，你只需要讓LiveStyle在當(dāng)前頁(yè)面可以使用，然后就是將瀏覽器樣式表和編輯器打開(kāi)的樣式表進(jìn)行關(guān)聯(lián)起來(lái)。在那以后，在編輯器上對(duì)樣式表進(jìn)行的改動(dòng)將會(huì)同步到瀏覽器指定的樣式表中，反之亦然。 有時(shí)候你可能想限制瀏覽器和編輯器之間的樣式更新以及保存功能，例如編輯器到瀏覽器更新，所以你用瀏覽器開(kāi)發(fā)工具欄對(duì)樣式修改的操作不會(huì)破壞源代碼。為了實(shí)現(xiàn)上述功能，只需要點(diǎn)擊藍(lán)色按鈕來(lái)循環(huán)選擇更新模式：

編輯器 ? 瀏覽器能夠?qū)崿F(xiàn)全雙工樣式表更新

編輯器 → 瀏覽器只能實(shí)現(xiàn)編輯器到瀏覽器樣式表更新，所有使用瀏覽器開(kāi)發(fā)工具欄從而對(duì)樣式表進(jìn)行修改的操作被忽略

編輯器 ← 瀏覽器只能實(shí)現(xiàn)開(kāi)發(fā)工具欄到編輯器樣式表更新，所有通過(guò)編輯器從而對(duì)樣式表進(jìn)行修改的操作被忽略

(用LiveStyle實(shí)現(xiàn))實(shí)時(shí)更新樣式表的教程

首先我們應(yīng)該創(chuàng)建實(shí)時(shí)更新所需的會(huì)話以便我們?nèi)绾魏?jiǎn)單又快樂(lè)的使用LiveStyle！

下載樣式表樣例，然后在Sublime Text打開(kāi)。

在Google Chrome瀏覽器中，跳轉(zhuǎn)到demo頁(yè)面。記住為了實(shí)現(xiàn)實(shí)時(shí)更新，我們將要使用沒(méi)有直接進(jìn)行數(shù)據(jù)訪問(wèn)的外網(wǎng)網(wǎng)站！等一下就會(huì)討論到這個(gè)問(wèn)題。

點(diǎn)擊瀏覽器工具欄的LiveStyle圖標(biāo)，彈出對(duì)話框，然后使LiveStyle對(duì)當(dāng)前頁(yè)面有效。

對(duì)話框顯示瀏覽器僅有的樣式表style.min.css。在它的位置下方有一個(gè)編輯器樣式表的下拉選項(xiàng)，選項(xiàng)包含當(dāng)前正被編輯器打開(kāi)的文件列表，這些列表可以被LiveStyle所監(jiān)聽(tīng)。簡(jiǎn)單的在下拉選項(xiàng)中選擇layout.css。在大多數(shù)情況下，LiveStyle會(huì)嘗試通過(guò)文件名來(lái)自動(dòng)和瀏覽器以及編輯器樣式表建立關(guān)聯(lián)。但是既然我們的樣式表?yè)碛胁煌拿?style.min.css和layout.css，所以我們需要手動(dòng)和它們建立聯(lián)系。

你現(xiàn)在可以進(jìn)行下一步啦！在Sublime Text中，在.sample-content__title {...}規(guī)則中將顏色屬性值改變成紅色，然后你應(yīng)該可以看到內(nèi)容變成紅色！把玩了.sample-content__title {...}然后添加例如background: yellow;規(guī)則。

現(xiàn)在打開(kāi)開(kāi)發(fā)者工具，然后找到并點(diǎn)擊

元素。你應(yīng)該可以看到Styles已經(jīng)包含你最近在編輯器對(duì)樣式表進(jìn)行更新的代碼：

7.在開(kāi)發(fā)者工具欄中，將.sample-content__title頭部的字體顏色設(shè)置成藍(lán)色，然后Sublime Text的源代碼相應(yīng)的更新。進(jìn)一步通過(guò)開(kāi)發(fā)者工具欄向.sample-content__title添加padding: 10px;

通過(guò)使用LiveStyle，你會(huì)發(fā)現(xiàn)實(shí)時(shí)編輯CSS將變得更加容易，但是你還是不能發(fā)現(xiàn)最具魔力的功能點(diǎn)。

代碼拼湊

看一眼style.min.css的源代碼。確實(shí)不同于layout.css:style.min.css被壓縮過(guò)而且包含更多的CSS規(guī)則以及屬性。

在現(xiàn)代的web開(kāi)發(fā)流程中，瀏覽器中的樣式表不同于代碼原作者所寫的。這些代碼被分成大的CSS代碼塊，然后形成模塊，然后在單一的文件中合并以及壓縮，運(yùn)行額外的后處理器(像Autoprefixer)，為了將最好的結(jié)果傳遞給用戶。并且LiveStyle非常熟悉這些流程。

而不是替換代碼(像其它的實(shí)時(shí)編輯工具)，LiveStyle使用代碼補(bǔ)?。篖iveStyle會(huì)監(jiān)聽(tīng)你改變的CSS屬性值，也會(huì)受CSS規(guī)則影響，將這些改變和其它的源代碼建立映射關(guān)系。你可以把它認(rèn)為CSS的React:而不是用innerHTML文本替換視圖內(nèi)容，LiveStyle應(yīng)用一系列先進(jìn)的技巧來(lái)監(jiān)聽(tīng)以及更新需要更新的部分，盡可能的保持以前的狀態(tài)。

為了更好的闡述LiveStyle如何工作的，讓我們回到教程上面提到的事例。在demo頁(yè)面，頁(yè)面的頭部運(yùn)用了兩種CSS規(guī)則：h4以及.sample-content__title。這個(gè)h4規(guī)則在style.min.css，但是沒(méi)有在layout.css。

在開(kāi)發(fā)者工具欄，將h4 {}的屬性font-family值改為arial，你應(yīng)該可以看到文本編輯器中出現(xiàn)新的規(guī)則：

h4 { font-family: arial; }

現(xiàn)在往文本編輯器h4 {...}規(guī)則中添加font-style: italic;屬性，然后頁(yè)面頭部字體呈現(xiàn)斜體，盡管在文本編輯器代碼部分不存在border-bottom屬性已是事實(shí)，但是(前面提到的框)仍然還是有底部邊框。換句話說(shuō)，LiveStyle只是傳遞更新的屬性，然后將它們應(yīng)用到其它一端。既不會(huì)替換CSS規(guī)則也不會(huì)替換整個(gè)樣式表。

這也是為什么要用LiveStyle將瀏覽器和編輯器建立聯(lián)系，可能最開(kāi)始感覺(jué)有點(diǎn)不尋常，例如，將你正在使用的css模塊和合并壓縮的網(wǎng)頁(yè)所有的樣式表源代碼建立關(guān)聯(lián)，你可以注意到當(dāng)前的任務(wù)是即時(shí)更新的，代替了需要浪費(fèi)10多秒等待時(shí)間直到整個(gè)css源代碼被重新編譯，然后在瀏覽器中渲染的做法(很像其它的即時(shí)編輯工具)。

你應(yīng)該學(xué)習(xí)的東西

LiveStyle即時(shí)更新CSS，沒(méi)有文件保存或者頁(yè)面預(yù)載入。這是第一個(gè)實(shí)現(xiàn)雙向CSS更新的工具：從編輯器到瀏覽器以及從瀏覽器到編輯器。

你不需要任何特殊的構(gòu)建工具或者為了讓LiveStyle跑起來(lái)所需的web服務(wù)器：幾乎internet上的所有的web站點(diǎn)都能成為你的游樂(lè)場(chǎng)。

你可以使用任何CSS文件來(lái)實(shí)時(shí)編輯，無(wú)論你是通過(guò)什么方式：通過(guò)硬盤驅(qū)動(dòng)打開(kāi)的，直接通過(guò)FTP服務(wù)器或者只是創(chuàng)建但是沒(méi)有保存等方式。如果你在文本編輯器打開(kāi)這些文件，然后你就可以對(duì)它們即時(shí)編輯。PS:不要忘記為你創(chuàng)建的以及未保存的文件設(shè)置CSS語(yǔ)法規(guī)則。

LiveStyle使用代碼拼湊：你可以輕易調(diào)整你的小型CSS模塊來(lái)匹配你的網(wǎng)站(含有合并壓縮的代碼塊)

和預(yù)處理器并肩作戰(zhàn)

有了LiveStyle，你就可以使用LESS以及SCSS(沒(méi)有SASS語(yǔ)法特征)來(lái)進(jìn)行雙向數(shù)據(jù)編輯。使用SCSS以及LESS文件的方式類似于CSS文件的使用方式：在編輯器中打開(kāi).less或者.scss文件，然后將Google Chrome擴(kuò)展的對(duì)話框列出的文件名(存在瀏覽器中)與編輯器中的文件建立關(guān)聯(lián)。但是你首先應(yīng)該學(xué)習(xí)一些關(guān)于預(yù)處理器支持事項(xiàng)。

最重要的是：

LiveStyle使用了由自己實(shí)現(xiàn)的LESS以及SCSS預(yù)處理器。

盡管該預(yù)處理器經(jīng)過(guò)嚴(yán)格的單元測(cè)試，可能有些用起來(lái)不盡人意以及一些功能點(diǎn)缺失。如果你發(fā)現(xiàn)該預(yù)處理器不能很好的工作，歡迎提交bug。

添加依賴

一旦需要實(shí)時(shí)編輯預(yù)處理器樣式表，LiveStyle自動(dòng)解析以及使用@import引入的文件，不像原始的預(yù)處理器，LiveStyle不會(huì)將css內(nèi)容添加到當(dāng)前樣式表中，而是將css內(nèi)容作為變量的值以及mixins。這就是一個(gè)爭(zhēng)議的話題，這種情況可能在未來(lái)會(huì)改變，但是現(xiàn)在對(duì)包含@import的css文件來(lái)說(shuō)@import引入的內(nèi)容會(huì)帶來(lái)降低性能的風(fēng)險(xiǎn)。

許多開(kāi)發(fā)者喜歡在任何場(chǎng)景中使用代碼類庫(kù)，并且假定在當(dāng)前項(xiàng)目中代碼類庫(kù)能夠被所有的單獨(dú)樣式表獲取到。例如，Twitter Bootstrap有一個(gè)variables.less文件，bootstrap.less文件包含variables.less文件。因此類似buttons.less模塊可以簡(jiǎn)單假定數(shù)據(jù)來(lái)自variables.less，variables.less只有在編譯時(shí)期才可獲取到，buttons.less 模塊并不是純粹的@importvariables.less內(nèi)容。

為了讓LiveStyle更好的知道一些假定的模塊或者任何其它全局的模塊，你需要添加針對(duì)當(dāng)前項(xiàng)目的全局依賴。你也可以僅僅向項(xiàng)目文件的livestyle區(qū)域(使用Sublime Text3打開(kāi))中增添全局?jǐn)?shù)組。

{ ... "livestyle": { "globals": ["./less/variables.less", "/path/to/global/mixins.less"] } }

從那以后，只要編輯當(dāng)前項(xiàng)目的任何樣式表，在globals區(qū)域中所包含的文件列表將會(huì)被用來(lái)解析變量以及mixins。

安全拼湊模式

LiveStyle使用一種安全拼湊模式，是為了將來(lái)自瀏覽器端的樣式的變化應(yīng)用到預(yù)處理器樣式表中。

讓我們考慮下面的例子，你可能會(huì)有下列的LESS樣式表

@a: 100px; @b: 50px; div { width: @a; }

編譯成下列瀏覽器端樣式表：

div { width: 100px; }

現(xiàn)在，當(dāng)你在開(kāi)發(fā)者工具欄將width屬性值設(shè)置為50px，原始的LESS樣式表是否更新？可能值為：

width:50px;——通過(guò)引入靜態(tài)值來(lái)簡(jiǎn)單的覆蓋原始表達(dá)式；太不聰明甚至可能會(huì)導(dǎo)致破壞可見(jiàn)的樣式以及難以察覺(jué)的錯(cuò)誤。

@a: 50px;——覆蓋能夠產(chǎn)生width屬性值的變量值；在大多數(shù)場(chǎng)景很可能會(huì)破壞你的代碼

width: @b;——使用其它變量(變量解析出的結(jié)果和需要引入值一樣)，未來(lái)會(huì)介紹錯(cuò)誤

width: @a / 2;——也許需要原始變量的一半？

width: @a - @b;——或者這個(gè)？

還有其它的有用組合。

當(dāng)然，對(duì)LiveStyle來(lái)說(shuō)，最簡(jiǎn)單的方案是用更新屬性值代替預(yù)處理器值，例如width: 50px;。但是對(duì)更新原始樣式表來(lái)說(shuō)，這是很冒險(xiǎn)的做法，因?yàn)槟銓?huì)失去變量參考(通過(guò)改變變量值來(lái)更新某些屬性的屬性值)的功能。你不再確定改變一個(gè)@a變量值將會(huì)合適地更新頁(yè)面的視圖以及樣式。

LiveStyle嘗試著如何讓自己在一些場(chǎng)景變得靈活以便應(yīng)用于安全更新：在當(dāng)前值和原來(lái)的值之間添加或者消除差異。在這種情況下，通過(guò)width:@a - 50來(lái)更新LESS文件：仍然能保存@a變量參考(通過(guò)改變變量值來(lái)更新某些屬性的屬性值)，對(duì)作為樣式表作者的你來(lái)說(shuō)，發(fā)現(xiàn)日后樣式表的更新以及更新所需要的樣式表是非常容易的。安全拼湊模式是用于為數(shù)字以及顏色服務(wù)。

安全拼湊模式是通過(guò)mixins來(lái)更新屬性。例如假設(shè)你有下列SCSS代碼：

@mixin foo { width: 100px; }.bar { @include foo;color: red; }

然后通過(guò)開(kāi)發(fā)者工具欄在.bar規(guī)則中設(shè)置width: 50px;，LiveStyle將會(huì)產(chǎn)生下列結(jié)果：

@mixin foo { width: 100px;} .bar { @include foo;color: red;width: 50px;}

LiveStyle可以很好的追蹤width屬性向上查找到@mixin foo源頭，在mixin里面改變屬性被認(rèn)為是不安全的，這樣會(huì)導(dǎo)致依賴與foomixin的規(guī)則被破壞，然后可能會(huì)注意不到這個(gè)情況。

Remote View

在一個(gè)項(xiàng)目開(kāi)發(fā)期間，你很有可能存在這個(gè)情況(一個(gè)本地網(wǎng)站通過(guò)http://localhost:8080的地址跑在簡(jiǎn)單的web服務(wù)器上或者其它方式)，在你希望在其它的設(shè)備上(其實(shí)就是手機(jī)端)測(cè)試你的網(wǎng)站之前，上面提到的方式表現(xiàn)的挺好的，如果你的電腦和手機(jī)處于同一個(gè)局域網(wǎng)中，上面所提到的問(wèn)題就不是事啦，而你需要做的是使用電腦的局域網(wǎng)IP(例如http://10.0.1.2:8080)來(lái)在手機(jī)上預(yù)覽你的本地網(wǎng)站。

當(dāng)你想在不同的設(shè)備上使用服務(wù)如BrowserStack來(lái)進(jìn)行測(cè)試或者你想將你的作品分享給同事或者顧客時(shí)該怎么辦？在這種情況下，你需要將你的項(xiàng)目復(fù)制一份，然后將其放在外網(wǎng)的服務(wù)器上。這樣做的的話，速度不快而且難度比較大(尤其是你的網(wǎng)站需要服務(wù)器端的邏輯控制)

LiveStyle可以讓你有更簡(jiǎn)單的以及更好的解決方案?？梢試L試Remote View。

Remote View產(chǎn)生一個(gè)指向你本地web服務(wù)器的域名(外網(wǎng)的人可以訪問(wèn))。將這個(gè)URL分享給你的同事以及客戶。在真實(shí)的設(shè)備通過(guò)使用上面提到的URL以及類似BrowserStack的服務(wù)來(lái)測(cè)試你的項(xiàng)目。而且，Remote View能夠讓LiveStyle自動(dòng)針對(duì)上面的URL進(jìn)行更新！使用DevTools以及代碼編輯器來(lái)微調(diào)樣式，然后你可以在多種設(shè)備上觀察到樣式即時(shí)更新。

使用Remote View的教程

在這個(gè)教程中，我們將使用demo頁(yè)面以及來(lái)自使用LiveStyle教程里面的樣式案例

為了使用Remote View功能你需要運(yùn)行LiveStyle應(yīng)用

在Google Chrome中，訪問(wèn)你要分享的網(wǎng)頁(yè)。在這個(gè)教程中，我們將會(huì)使用http://livestyle.io/demo/，但是你可以使用你本地的網(wǎng)站如http://localhost:8080。

點(diǎn)擊LiveStyle圖標(biāo)打開(kāi)LiveStyle對(duì)話框，然后切換到Remote View：

在第一次使用的時(shí)候，你需要請(qǐng)求權(quán)限認(rèn)證，然后你需要Google帳號(hào)來(lái)被認(rèn)證。

幾秒過(guò)后，你會(huì)看到類似some-name.livestyle.io的公用域名(該域名指向使用Remote View的頁(yè)面)。在URL為http://livestyle.io/demo/的demo頁(yè)面例子中，它將會(huì)指向http://livestyle.io域名。成功的例子是這樣的。例如，在URL為http://localhost:8080/about/的頁(yè)面中，liveStyle指向http://localhost:8080域名等。使用這個(gè)域名然后就可以在不同的設(shè)備上或者其它瀏覽器上訪問(wèn)你的本地網(wǎng)頁(yè)。通過(guò)點(diǎn)擊另外tab的Remote View就可以打開(kāi)和公開(kāi)域名相同的頁(yè)面。

現(xiàn)在，在Sublime Text編輯與原始頁(yè)面的文件(例如layout.css)建立聯(lián)系的CSS文件，然后你應(yīng)該可以看到原始的頁(yè)面和Remote View的頁(yè)面都是立即更新。

用新標(biāo)簽頁(yè)的方式打開(kāi)原始頁(yè)面，然后打開(kāi)開(kāi)發(fā)者工具欄，更新一些樣式，然后Remote View頁(yè)面也會(huì)更新！

當(dāng)你已經(jīng)完成上面步驟，現(xiàn)在要做的是關(guān)閉LiveStyle對(duì)話框上Remote View來(lái)清除session：some-name.livestyle.io，就是讓session不再指向你本地的網(wǎng)站。如果在30分鐘內(nèi)沒(méi)有人使用Remote View域名，那么session將會(huì)被自動(dòng)清除。

正如你所看到的，在真實(shí)的設(shè)備上微調(diào)網(wǎng)頁(yè)樣式是非常容易的。毫無(wú)壓力，你可以和你的用戶或者同事創(chuàng)建實(shí)時(shí)的協(xié)同session：分享Remote View URL以及進(jìn)行樣式實(shí)時(shí)更新！

在Beta測(cè)試期間，收費(fèi)的Remote View服務(wù)會(huì)完全免費(fèi)。

解決問(wèn)題

LiveStyle是具有試驗(yàn)性的以及細(xì)節(jié)非常復(fù)雜的軟件，并且有時(shí)候不會(huì)按照常理出牌，進(jìn)而不起作用。這個(gè)指南將會(huì)幫助你找到問(wèn)題關(guān)鍵所在。

對(duì)有效的CSS文件敏感

為了更好的雙向?qū)崟r(shí)編輯體驗(yàn)，LiveStyle執(zhí)行源代碼拼湊：LiveStyle將樣式解析成對(duì)象模型以及對(duì)更新的數(shù)據(jù)作出反應(yīng)。這就意味著你的CSS/LESS/SCSS一定要不含語(yǔ)法錯(cuò)誤。LiveStyle會(huì)嘗試從簡(jiǎn)單的錯(cuò)誤中恢復(fù)，但是有時(shí)候也會(huì)失敗。

如果樣式文件一點(diǎn)都不能被解析或者在實(shí)時(shí)更新期間遭遇致命錯(cuò)誤，一會(huì)兒你會(huì)看到到在Google Chrome的LiveStyle圖標(biāo)會(huì)刷新成紅色：

如果你點(diǎn)擊這個(gè)圖標(biāo)，你將會(huì)在擴(kuò)展程序彈出框出現(xiàn)錯(cuò)誤提示，當(dāng)然“查看錯(cuò)誤日志”的鏈接會(huì)長(zhǎng)時(shí)間留在彈出框上，所以你可以點(diǎn)擊鏈接，回顧錯(cuò)誤的原因：

處理本地文件

如果你在開(kāi)發(fā)本地網(wǎng)頁(yè)(例如通過(guò)file://協(xié)議來(lái)打開(kāi)網(wǎng)頁(yè))，Google Chrome可能會(huì)應(yīng)用一些限制。

如果你在LiveStyle彈出框看不到任何樣式表名字，很有可能是因?yàn)長(zhǎng)iveStyle不能使用文件URLs(chrome對(duì)所有的插件都一樣)。為了突破這些限制，切換到Preferences > Extensions，然后在LiveStyle擴(kuò)展選項(xiàng)"Allow access to file URLs"打勾：

由于Google Chrome安全策略，你不會(huì)在LiveStyle彈出框中看到含有@import的樣式表。只要打開(kāi)開(kāi)發(fā)者工具欄來(lái)修正這個(gè)問(wèn)題。

記著，強(qiáng)烈推薦通過(guò)使用http://協(xié)議來(lái)訪問(wèn)網(wǎng)頁(yè)：在已知的文件夾有很多的免費(fèi)且簡(jiǎn)單的啟動(dòng)本地HTTP服務(wù)器的工具(在不久的將來(lái)LiveStyle會(huì)有一些選項(xiàng))。當(dāng)你通過(guò)file://協(xié)議打開(kāi)網(wǎng)頁(yè)時(shí)，Google Chrome會(huì)應(yīng)用一些限制(LiveStyle會(huì)試著通過(guò)不同hack方式來(lái)突破這些限制)，結(jié)果，你可能會(huì)經(jīng)歷性能變低以及頁(yè)面更新出錯(cuò)。

如果你仍然不想使用本地HTTP服務(wù)器，只是用開(kāi)發(fā)者工具打開(kāi)當(dāng)前頁(yè)面，然后在實(shí)時(shí)編輯session期間一直打開(kāi)當(dāng)前頁(yè)面。

樣式列表為空

如果你打開(kāi)LiveStyle彈出框，然后沒(méi)有看到樣式表，但是你確定當(dāng)前頁(yè)面已經(jīng)包含額外的樣式，可以嘗試下列方法：

關(guān)閉開(kāi)發(fā)者工具然后重新檢查彈出框，打開(kāi)開(kāi)發(fā)者工具然后重新檢查。

刷新當(dāng)前頁(yè)面。

關(guān)閉tab然后重新打開(kāi)。

在擴(kuò)展自動(dòng)更新后可能會(huì)出現(xiàn)類似錯(cuò)誤。

無(wú)連接

Chrome擴(kuò)展通過(guò)Websocket協(xié)議和編輯器建立連接。如果出現(xiàn)"無(wú)連接"錯(cuò)誤，可能是以下的問(wèn)題：

Sublime Text沒(méi)有運(yùn)行或者Sublime Text的LiveStyle擴(kuò)展沒(méi)有安裝。

你的文本編輯器沒(méi)有安裝最新版的LiveStyle擴(kuò)展。如果你是通過(guò)Package Control來(lái)安裝Sublime Text擴(kuò)展，只需要重啟編輯器來(lái)自動(dòng)更新擴(kuò)展。

你當(dāng)前網(wǎng)絡(luò)設(shè)置/代理/防火墻阻塞了到http://127.0.0.1:54000的網(wǎng)絡(luò)連接——Websocket服務(wù)器運(yùn)行在這個(gè)地址。關(guān)于這個(gè)問(wèn)題解決方案請(qǐng)聯(lián)系系統(tǒng)管理員。

"無(wú)連接"問(wèn)題出現(xiàn)的另一個(gè)理由是破壞了Sublime Text web服務(wù)器的實(shí)現(xiàn)。檢查Sublime Text錯(cuò)誤日志中的View > Show Console。在這種情況下你可以打開(kāi)[LiveStyle應(yīng)用](http://livestyle.io/#download)然后重啟Sublime Text：LiveStyle應(yīng)用具有它自己的服務(wù)器實(shí)現(xiàn)，所以當(dāng)Sublime Text啟動(dòng)時(shí)，創(chuàng)建新連接來(lái)代替失效的連接。

獲取調(diào)試信息

如果你的樣式文件有效，就看不到錯(cuò)誤提示信息，但是LiveStyle仍然不能正常工作，你就可以檢查內(nèi)部調(diào)試日志來(lái)獲取更多的信息。

獲取調(diào)試日志：

在Google Chrome中，跳轉(zhuǎn)到擴(kuò)展首選頁(yè)面-chrome://extensions/。

在右上角開(kāi)啟"開(kāi)發(fā)者模式"。

點(diǎn)擊Emmet LiveStyle擴(kuò)展的"背景圖片"：

將會(huì)打開(kāi)開(kāi)發(fā)者工具窗口，跳轉(zhuǎn)到"控制臺(tái)"的窗格來(lái)查看調(diào)試日志，盡可能的找到產(chǎn)生錯(cuò)誤的線索。

提交錯(cuò)誤以及建議

如果在使用過(guò)程中你發(fā)現(xiàn)LiveStyle出現(xiàn)錯(cuò)誤或者你覺(jué)得針對(duì)LiveStyle需要改進(jìn)的建議，你都可以提交問(wèn)題/建議。請(qǐng)?jiān)谔峤粏?wèn)題之前請(qǐng)遵循下面一些規(guī)則：

查看已提交的問(wèn)題，有些人已經(jīng)提交了相同的問(wèn)題，這里有關(guān)于解決方案的討論。

盡可能詳細(xì)描述你的問(wèn)題，你期望得到的結(jié)果以及可能造成錯(cuò)誤的原因。提交模版如"LiveStyle無(wú)效!!!!"是沒(méi)有作用的。

請(qǐng)?jiān)黾铀锌赡苠e(cuò)誤的調(diào)試日志(如文本日志或者屏幕截屏)。

如果可能的話，附加上造成錯(cuò)誤的樣式代碼片段。

附上截屏以及小視頻/闡述錯(cuò)誤的動(dòng)效圖，可能幫助更大一點(diǎn)。

原文：http://www.w3ctech.com/topic/1670