在 VS Code 當中,使用 Live Server 插件時,你可以透過右下角按鈕的 Go Live 按鍵,來達到完全不用另架伺服器即可預覽網頁的功能。
它雖然可以在瀏覽器上顯示你的網頁,但如果不想用F12模擬器模擬手機版,而是真正想要用手機來查看這個未上架的網頁時,該怎麼設定呢?
這篇就來告訴大家從安裝 Live Server 插件開始教學,最後會教大家在手機上也能預覽網頁的設定!
如果你已經知道如何安裝以及如何使用 Go Live 功能,只差不知道如何使用手機版預覽的設定,可以直接從目錄按下【 用手機預覽你的網頁該如何設定 】跳至設定教學的位置喔!
內容目錄
安裝 Live Server 插件
首先開啟VS Code,點選左側選單中四個方塊圖示的「延伸模組」按鈕,點下去後搜尋「 Live Server 」,並按下「安裝」。
![Live Server安裝 Live Server安裝](/uploads/2021/10/live_server01.png)
安裝好之後,你就可以開啟你的網頁程式碼檔案,這邊以 HTML 為例。
![使用VS Code開啟網頁程式碼 使用VS Code開啟網頁程式碼](/uploads/2021/10/image.png)
再來就準備使用Go Live功能一鍵預覽囉!讓你不用另外安裝XAMPP或MAMP,就可以在瀏覽器上預覽你的網頁!
使用 Live Server 內建的 Go Live 功能預覽網頁
緊接著,我們把檔案存檔後,可以看到整個VS Code右下角,有一個Go Live的按鈕,就給他用力按下去!
![Go Live 按鈕 Go Live 按鈕](/uploads/2021/10/image-1.png)
這樣就直接自動跳出瀏覽器,並且完成網頁的預覽囉!
![完成直接預覽網頁 完成直接預覽網頁](/uploads/2021/10/image-4.png)
故障排除
故障狀況1:安裝 Live Server 插件後沒出現 Go Live 按鈕
如果你發現你的VS Code沒有Go Live按鈕,可能的狀況有兩種:
- 可能是你剛安裝插件,所以建議把VS Code重開就可以了。
- 如果你是早就安裝但突然有這個狀況,可能是你不是以資料夾的方式開啟,而是只有直接開啟檔案的關係。
想透過資料夾的方式開啟的話,可以到左側列表最上方的「檔案總管」圖示按鈕 > 「開啟資料夾」按鈕,並點選你檔案的整個資料夾。
![從檔案總管開啟資料夾 從檔案總管開啟資料夾](/uploads/2021/10/image-2.png)
選擇後再從下圖左側紅色框框的位置開啟檔案,右下角就成功出現Go Live囉!
![從檔案總管開啟檔案 從檔案總管開啟檔案](/uploads/2021/10/image-3.png)
故障狀況2:Go Live 按鈕按下去後,卻都跳之前寫的其他檔案頁面?
這個狀況是我在寫這篇的時候突然出現的問題,是熱騰騰的故障啊!!
這個原因跟檔案總管也很有關係,如果你之前在編輯A頁面,而且檔案總管是開啟A頁面的資料夾。
突然你想改一下不同資料夾的B頁面時,如果你不是從檔案總管開啟B頁面的資料夾,而是直接開啟B頁面後按下Go Live,那插件一樣會開啟的是A頁面噢!
![檔案總管位置 檔案總管位置](/uploads/2021/10/image-5.png)
用手機預覽你的網頁該如何設定
上面已經學會如何使用Live Server插件,並且成功在網頁上直接預覽你的網頁了。
想使用真正的手機來預覽網頁的話,有兩個要件:
- 手機和電腦要連同一個Wifi
- 到VS Code中的設定輸入一行程式碼
要輸入什麼程式碼呢?
首先點選上方選單的「檔案」 > 「喜好設定」 > 「設定」。
![開啟設定列表 開啟設定列表](/uploads/2021/10/image-6.png)
設定列表中,找到 Live Server 插件,並且找任一個「在settings.json內編輯」按鈕點下去,就能開啟設定的程式碼要撰寫的位置。
![開啟settings.json 開啟settings.json](/uploads/2021/10/image-8.png)
開啟後,打上以下程式碼:
"liveServer.settings.useWebExt": true
![設定程式碼 設定程式碼](/uploads/2021/10/image-9.png)
務必記得你在設定檔中,
每一個項目之間要有「,」逗號當作間隔噢!
存檔後,你就可以透過你的IP位置,用手機連上你的網頁囉!
我們來試試看吧!
實作用手機開啟測試網頁
我們確認過手機和電腦連的是同一個Wifi後,可以先開啟命令提示字元(CMD)來查找自己的IP位置是多少。
開啟命令提示字元後,直接打上 「ipconfig」 並按下Enter鍵。
![找到電腦的IP位置 找到電腦的IP位置](/uploads/2021/10/image-12.png)
上圖的IPv4就是你的IP位置了,因此只要到你的手機上打上192.168.XXX.XXX(每台電腦皆不同),後面接:5500(因為Live Server插件預設就是:5500)
也就是你在手機的網址列輸入:
192.168.XXX.XXX:5500
並按下Enter,你就可以順利在手機上預覽你的網頁囉!。
![手機預覽畫面 手機預覽畫面](/uploads/2021/10/image-11.png)
總結
之前我都使用F12手機模擬器來模擬,有時候還是會覺得沒有直接在手機上看來得準確,尤其是字體大小和CSS動態效果的呈現,還是要真的拿起手機來預覽比較有感覺!
這篇 Live Server 插件介紹,從安裝、故障排除到 VS Code 的設定,順利達成在手機上預覽網頁的目的,不用另外安裝模擬器的預覽方法最方便了!