天天看點

實時可視化工具之livereload

livereload這個工具,簡單易用  相當于幫我們按了浏覽器的F5,可以實時的重新整理頁面。接下來看一下步驟

1.谷歌浏覽器安裝插件  livereload

實時可視化工具之livereload

2.npm全局安裝livereload:npm install -g livereload

3.cd到項目檔案夾下

4. 在項目中啟動livereload。指令:livereload   

實時可視化工具之livereload

5.用浏覽器打開項目,發現右上角livereload的圖示變成了實心的,說明livereload已經生效,此時在編輯器中改代碼,頁面就會自動重新整理

實時可視化工具之livereload

如果沒有變成實心,點選一下即可

注意:

由于 chrome 安全機制,暫不支援通過 file:// 打開的頁面

繼續閱讀