阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

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

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

要在手機上查看本地網站的即時預覽,請確保您的手機和桌面連接到相同 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 位址可能會發生變化。

尋找您的本機 IPv4 位址

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、CSSJavaScript以及其他框架專案建立的靜態專案。

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

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


原文出處:https://dev.to/codingnepal/how-to-test-local-website-on-mobile-devices-2p69


共有 0 則留言


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

阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈