Skip to content
相信有在學響應式網頁的人,應該都曾苦惱過常常因為某些原因在手機上跑起來頻頻出bug
相信有在學響應式網頁的人,應該都曾苦惱過常常因為某些原因在手機上跑起來頻頻出bug

有什麼辦法能在開發的同時能夠在手機上即時做測試行動版網頁嗎? 別煩惱了! 就跟這接下來的步驟,一招教你輕鬆測試行動版網頁。

步驟1: 在電腦上開啟網頁伺服器

在開發網頁的時候我們常常需要在本機開啟一個網頁伺服器,測試網頁實際跑起來效果怎樣。在本機開伺服器的方法有很多種,全看使用的開發環境與習慣。這邊我推薦可以從vscode的擴充套件安裝"live server",安裝完你的視窗右下角會多一個"Go Live"的按鈕。可以用來開啟伺服器,發送你專案資料夾中的網頁檔案。這邊他預設的port是使用5500,因此如要在本機查看網頁可以在瀏覽器打上locoalhost:5500或是127.0.0.1:5500,來檢查是否有成功。

如果你使用的文字編輯器沒有提供live server的功能的話,當然你也可以使用正規的方法安裝apache來啟用網頁伺服器的功能。或是如果是用node.js開發的話,寫好程式後輸入npm start,也會開一個預設使用3000 port的網頁伺服器。

animation
從vscode的擴充套件查詢安裝live server
animation
安裝完你的視窗右下角會多一個"Go Live"的按鈕
animation
按一下"Go Live"按鈕開啟伺服器,port是使用5500
animation
在瀏覽器打上localhost:5500或是127.0.0.1:5500,來檢查是否有成功

步驟2: 將手機與電腦連到同一個Wi-fi

打開網頁伺服器之後,要將手機連到電腦一樣的區域網路,這樣手機才有辦法取得伺服器所發送的網頁檔案。要達成這樣的目的最簡單的方法就是將它們都連到同一個wi-fi。如果家裡沒有wi-fi分享機的話,也可以打開手機的個人熱點和電腦連線。

animation
將手機與電腦連到同一個Wi-fi

步驟3: 查詢電腦被分配到的ip

接著打開命令提示字元,輸入ipconfig,找到「無線區域網路介面卡Wi-Fi」這個區塊。就能查詢到電腦被分配到的ip,像是下圖中找到的結果為192.168.0.5。(linux/Mac的話使用ifconfig)

animation
在工具列搜尋輸入cmd就能找到命令提示字元
animation
輸入ipconfig
animation
IPv4位址就是電腦被分配到的ip

步驟4: 將ip和port輸入到手機瀏覽器上即可看到網頁

查完ip後還記得最一開始的port嗎? 最後只要開啟手機的瀏覽器,將ip和port中間以冒號分隔輸入(這邊以192.168.0.5:5500為例),就能看到你電腦所發送出的網頁,是不是很方便呢!

animation
將ip和port中間以冒號分隔輸入(這邊以192.168.0.5:5500為例)