今天再給大家普及一款前端除錯專用外掛，谷歌的 LiveReload,這東西是幹嘛用的呢？

我們知道編輯器，比如我用的webstorm，或者你們的sublime text*，等等，在編寫scss的時候能實時將資料夾中的.scss檔案轉換為.css檔案，或者使用gulp時，能實時將js檔案壓縮呀等等，這些都是程式碼處理上編輯器或者一些構建工具對程式碼的實時操作，LiveReload外掛能對瀏覽器進行實時重新整理，也就是說每在編輯器改一句程式碼，不用F5按下，瀏覽器自動重新整理頁面檢視效果。

欲練此功，不用自宮，步驟如下：

（1）谷歌瀏覽器直接 更多工具>拓展程式 搜尋即可找到，外掛長這樣，直接安裝即可。

（2）編輯器端配置，我的webstorm直接，File>setting>Build,Execution,Deployment>Debugger>Live Edit,設定如下：

這裡Auto in 為實時重新整理時間間隔，可自定義設定。

（3）接下來websotrm就提示你了，還要給谷歌安裝另一款外掛，JetBrains IDE Suport，同第一步，直接安裝即可。

（4）最後一步，編輯器中選擇檔案，滑鼠右鍵，進行dibug除錯即可：

點選debug 'index.html' 之後，出現如下：

這時在編輯器更新程式碼，瀏覽器實時重新整理，根本不用按F5，但是這個黃條不能取消，取消之後則實時除錯模式取消。

而且該外掛有一個缺點，就是按F12之後，實時重新整理即關閉，所以移動端除錯時就不能實時重新整理頁面了。