小編精選 - 技術文章翻譯 · 06月24日

如何在行動裝置上測試本地網站

在建立網站時，開發人員通常需要測試他們的網站是否響應靈敏、經過優化並且在行動裝置上運作良好。如果他們不知道一種簡單且正確的方法來進行測試，那麼測試可能會令人沮喪。

在這篇文章中，我將向您展示如何透過三個簡單的步驟在行動裝置上測試本地網站。儘管瀏覽器開發工具可以提供幫助，但有時您可能需要更好的視覺化、清晰度和與專案的觸控互動。在這種情況下，在實際手機上進行測試可能比使用瀏覽器的行動螢幕更好。

要在手機上查看本地網站的即時預覽，請確保您的手機和桌面連接到相同 WiFi 網路。如果尚未安裝，請安裝VS Code編輯器和Live Server擴充功能。

在電話上測試本地網站的步驟

下載 VS Code 編輯器及其 Liver Server 擴充功能後，現在請按照給定的 3 個步驟逐行查看手機上的本機專案：

首先，在 VS Code 中開啟專案資料夾。然後，點擊右下角的「上線」按鈕。這將為您的專案啟動本機開發伺服器，通常在連接埠5500上執行。

您的專案現在應該在預設的 Web 瀏覽器中執行。記下連接埠號碼（5500 或其他數字，如果不同）。

執行實時伺服器

接下來，您需要本機 IPv4 位址。開啟命令提示字元 (CMD)，鍵入 ipconfig，然後按 Enter。在「無線 LAN 適配器 Wi-Fi」部分下尋找您的 IPv4 位址。它看起來像192.168.1.68 。

請記住，如果新設備連接或斷開與您的 WiFi 網路的連接，您的本地 IP 位址可能會發生變化。

尋找您的本機 IPv4 位址

開啟手機上的瀏覽器並輸入您的 IPv4 位址，然後輸入連接埠號碼。 URL 應如下所示： 192.168.1.68:5500 。

如果您的主 HTML 檔案未命名為 index.html，則需要在 URL 中包含檔案名，如下所示： 192.168.1.68:5500/filename.html 。

在手機上查看您的專案

現在您應該在手機上看到專案的即時預覽。您在桌面上的 VS Code 中所做的任何更改都會立即反映在您的手機上，無需手動刷新。

如果您遇到「無法存取網站」或類似內容的錯誤，請嘗試以下故障排除步驟：

在這篇文章中，您學習如何在手機上查看專案的即時預覽。此方法適用於使用HTML、CSS和JavaScript以及其他框架專案建立的靜態專案。

如果您想提高編碼的準確性、速度和效能，請查看我的部落格文章《面向 Web 開發人員的十大有用 VS 程式碼擴充》。

如果您發現本指南有幫助，請與其他人分享！

0個讚 0留言 171瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

精選技術文章翻譯，幫助開發者持續吸收新知。