# 好用開發者工具：Live Reload 網頁儲存時即時更新頁面
###### tags: `xmmp` `php` `html` `css`

介紹一個萬年好用的開發者工具，用localhost也沒問題的好東東！看評論很多人都說他壞了，原本我使用經驗是時好時壞，認真研究一下總算發現問題在設計上（汗），這篇直接寫來做善事造福各位！首先，我是使用Chrome示範，一定要先下載[Live Reload](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=zh-TW)外掛，接著把權限打開：

我是用sublime text，以下用sublime text來示範。首先，每次使用都要從sublime text啟用一次，快捷鍵：

:::success
cmd+shift+P
:::

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

以上任一種方式都會出現這樣的畫面，點Enter：

接著選Enable - Simple Reload（儲存時即時更新頁面）：

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

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

其實代表尚未啟用：
:::danger
Enable LiveReload
（有權存取這個網站）
:::

翻譯得再好一點可以嗎！就跟我說句「現在還沒啟用」很難嗎我就問！請直接視同：
:::danger
Enable LiveReload
（LiveReload尚未啟用，點擊啟用）
:::

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

這就是啟用了：
:::success
LiveReload is connected, click to disable.
（有權存取這個網站）
:::

你他媽中文翻譯可以認真一點嗎！！總之就是這樣的意思：
:::success
LiveReload is connected, click to disable.
（LiveReload啟用中，點擊取消）
:::

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