它雖然可以在瀏覽器上顯示你的網頁，但如果不想用F12模擬器模擬手機版，而是真正想要用手機來查看這個未上架的網頁時，該怎麼設定呢？

這篇就來告訴大家從安裝 Live Server 插件開始教學，最後會教大家在手機上也能預覽網頁的設定！

如果你已經知道如何安裝以及如何使用 Go Live 功能，只差不知道如何使用手機版預覽的設定，可以直接從目錄按下【 用手機預覽你的網頁該如何設定 】跳至設定教學的位置喔！

安裝 Live Server 插件

首先開啟VS Code，點選左側選單中四個方塊圖示的「延伸模組」按鈕，點下去後搜尋「 Live Server 」，並按下「安裝」。

安裝好之後，你就可以開啟你的網頁程式碼檔案，這邊以 HTML 為例。

再來就準備使用Go Live功能一鍵預覽囉！讓你不用另外安裝XAMPP或MAMP，就可以在瀏覽器上預覽你的網頁！

使用 Live Server 內建的 Go Live 功能預覽網頁

緊接著，我們把檔案存檔後，可以看到整個VS Code右下角，有一個Go Live的按鈕，就給他用力按下去！

這樣就直接自動跳出瀏覽器，並且完成網頁的預覽囉！

故障排除

故障狀況1：安裝 Live Server 插件後沒出現 Go Live 按鈕

如果你發現你的VS Code沒有Go Live按鈕，可能的狀況有兩種：

1. 可能是你剛安裝插件，所以建議把VS Code重開就可以了。
2. 如果你是早就安裝但突然有這個狀況，可能是你不是以資料夾的方式開啟，而是只有直接開啟檔案的關係。

想透過資料夾的方式開啟的話，可以到左側列表最上方的「檔案總管」圖示按鈕 > 「開啟資料夾」按鈕，並點選你檔案的整個資料夾。

選擇後再從下圖左側紅色框框的位置開啟檔案，右下角就成功出現Go Live囉！

故障狀況2：Go Live 按鈕按下去後，卻都跳之前寫的其他檔案頁面？

這個狀況是我在寫這篇的時候突然出現的問題，是熱騰騰的故障啊！！

這個原因跟檔案總管也很有關係，如果你之前在編輯A頁面，而且檔案總管是開啟A頁面的資料夾。

突然你想改一下不同資料夾的B頁面時，如果你不是從檔案總管開啟B頁面的資料夾，而是直接開啟B頁面後按下Go Live，那插件一樣會開啟的是A頁面噢！

用手機預覽你的網頁該如何設定

上面已經學會如何使用Live Server插件，並且成功在網頁上直接預覽你的網頁了。

想使用真正的手機來預覽網頁的話，有兩個要件：

1. 手機和電腦要連同一個Wifi
2. 到VS Code中的設定輸入一行程式碼

要輸入什麼程式碼呢？
首先點選上方選單的「檔案」 > 「喜好設定」 > 「設定」。

設定列表中，找到 Live Server 插件，並且找任一個「在settings.json內編輯」按鈕點下去，就能開啟設定的程式碼要撰寫的位置。

開啟後，打上以下程式碼：

"liveServer.settings.useWebExt": true

務必記得你在設定檔中，

每一個項目之間要有「,」逗號當作間隔噢！

存檔後，你就可以透過你的IP位置，用手機連上你的網頁囉！

我們來試試看吧！

實作用手機開啟測試網頁

我們確認過手機和電腦連的是同一個Wifi後，可以先開啟命令提示字元（CMD）來查找自己的IP位置是多少。

開啟命令提示字元後，直接打上 「ipconfig」 並按下Enter鍵。

上圖的IPv4就是你的IP位置了，因此只要到你的手機上打上192.168.XXX.XXX（每台電腦皆不同），後面接:5500（因為Live Server插件預設就是:5500）

也就是你在手機的網址列輸入：
192.168.XXX.XXX:5500
並按下Enter，你就可以順利在手機上預覽你的網頁囉！。

總結

之前我都使用F12手機模擬器來模擬，有時候還是會覺得沒有直接在手機上看來得準確，尤其是字體大小和CSS動態效果的呈現，還是要真的拿起手機來預覽比較有感覺！

這篇 Live Server 插件介紹，從安裝、故障排除到 VS Code 的設定，順利達成在手機上預覽網頁的目的，不用另外安裝模擬器的預覽方法最方便了！