在建立網站時，開發人員通常需要測試他們的網站是否響應靈敏、經過優化並且在行動裝置上運作良好。如果他們不知道一種簡單且正確的方法來進行測試，那麼測試可能會令人沮喪。
在這篇文章中，我將向您展示如何透過三個簡單的步驟在行動裝置上測試本地網站。儘管瀏覽器開發工具可以提供幫助，但有時您可能需要更好的視覺化、清晰度和與專案的觸控互動。在這種情況下，在實際手機上進行測試可能比使用瀏覽器的行動螢幕更好。
要在手機上查看本地網站的即時預覽，請確保您的手機和桌面連接到相同 WiFi 網路。如果尚未安裝，請安裝VS Code編輯器和Live Server擴充功能。
在電話上測試本地網站的步驟
下載 VS Code 編輯器及其 Liver Server 擴充功能後，現在請按照給定的 3 個步驟逐行查看手機上的本機專案：
1. 執行實時伺服器
首先，在 VS Code 中開啟專案資料夾。然後，點擊右下角的「上線」按鈕。這將為您的專案啟動本機開發伺服器，通常在連接埠5500上執行。
您的專案現在應該在預設的 Web 瀏覽器中執行。記下連接埠號碼（5500 或其他數字，如果不同）。
2. 尋找您的本地 IPv4 位址
接下來，您需要本機 IPv4 位址。開啟命令提示字元 (CMD)，鍵入 ipconfig，然後按 Enter。在「無線 LAN 適配器 Wi-Fi」部分下尋找您的 IPv4 位址。它看起來像192.168.1.68 。
請記住，如果新設備連接或斷開與您的 WiFi 網路的連接，您的本地 IP 位址可能會發生變化。
3. 在手機上查看您的專案
開啟手機上的瀏覽器並輸入您的 IPv4 位址，然後輸入連接埠號碼。 URL 應如下所示： 192.168.1.68:5500 。
如果您的主 HTML 檔案未命名為 index.html，則需要在 URL 中包含檔案名，如下所示： 192.168.1.68:5500/filename.html 。
現在您應該在手機上看到專案的即時預覽。您在桌面上的 VS Code 中所做的任何更改都會立即反映在您的手機上，無需手動刷新。
常見錯誤故障排除
如果您遇到「無法存取網站」或類似內容的錯誤，請嘗試以下故障排除步驟：
仔細檢查 IPv4 位址和連接埠號碼：確保您在手機瀏覽器中輸入了正確的 IPv4 位址和連接埠號碼。
檢查網路連線：確保您的手機和桌面連接到相同 WiFi 網路。
檢查檔案路徑：如果您的主 HTML 檔案不是
index.html，請確保 URL 中包含正確的檔案路徑。防火牆設定：您電腦的防火牆可能阻止連線。調整設定以允許 Live Server 使用的連接埠號碼上的流量。
結論
在這篇文章中，您學習如何在手機上查看專案的即時預覽。此方法適用於使用HTML、CSS和JavaScript以及其他框架專案建立的靜態專案。
如果您想提高編碼的準確性、速度和效能，請查看我的部落格文章《面向 Web 開發人員的十大有用 VS 程式碼擴充》 。
如果您發現本指南有幫助，請與其他人分享！
原文出處：https://dev.to/codingnepal/how-to-test-local-website-on-mobile-devices-2p69
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式