好用開發者工具:Live Reload 網頁儲存時即時更新頁面

10月 29, 2022

 


 留言


介紹一個萬年好用的開發者工具,用localhost也沒問題的好東東!看評論很多人都說他壞了,原本我使用經驗是時好時壞,認真研究一下總算發現問題在設計上(汗),這篇直接寫來做善事造福各位!


首先,我是使用Chrome示範,一定要先下載Live Reload外掛,接著把權限打開:

瀏覽器上的外掛安裝好了之後,接著打開你的編輯器,以下用sublime text來示範。首先,從sublime text按快捷鍵:

cmd+shift+P

並且輸入“ Package Control: Install Package”,接著輸入"LiveReload",在你的編輯器也一樣安裝好這個插件,有必要的話可以重新啟動你的編輯器。


接著,記得每次使用都要從sublime text啟用一次,啟用跟關閉同樣是快捷鍵:

cmd+shift+P

接著輸入:

LiveReload: Enable/disable plugins

反骨一點的工程師,就是想玩小朋友下樓梯、揪愛這樣點也可以:


接著選Enable - Simple Reload(儲存時即時更新頁面):

最最重要的一步,記得釘選LiveReload到你的Chrome瀏覽器上,並把你的小鼠鼠移到LiveReload那可憐又隱晦的迴轉小icon上,確認連接狀態:

LiveReload做得最不好就是連接ing跟斷開連結的icon跟文字狀態難以判斷,如果滑鼠移上去是Enable LiveReload:

其實代表尚未啟用:

Enable LiveReload
(有權存取這個網站)

翻譯得再好一點可以嗎!就跟我說句「現在還沒啟用」很難嗎我就問!請直接視同:

Enable LiveReload
(LiveReload尚未啟用,點擊啟用)

輕輕的點一下那個隱晦的小icon,圖示完全抖都沒抖一下不是你的錯,是設計真的有問題,等等有空再去送評論逼作者改,先把你的小鼠鼠移到icon上,確認浮現這樣的標語:

這就是啟用了:

LiveReload is connected, click to disable.
(有權存取這個網站)

你他媽中文翻譯可以認真一點嗎!!總之就是這樣的意思:

LiveReload is connected, click to disable.
(LiveReload啟用中,點擊取消)

這才是連接中的狀態,現在你到sublime text存檔應該可以馬上看到及時的更新!

You Might Also Like

0 意見