別再用電腦檢查RWD了! 一招教你輕鬆測試行動版網頁
相信有在學響應式網頁的人,應該都曾苦惱過,明明在電腦上用開發人員工具測試過沒問題,但實際上線或部屬到測試機之後卻又不如預期,常常因為某些原因在手機上跑起來頻頻出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的網頁伺服器。
![]() |
---|
從vscode的擴充套件查詢安裝live server |
![]() |
---|
安裝完你的視窗右下角會多一個"Go Live"的按鈕 |
![]() |
---|
按一下"Go Live"按鈕開啟伺服器,port是使用5500 |
![]() |
---|
在瀏覽器打上localhost:5500或是127.0.0.1:5500,來檢查是否有成功 |
步驟2: 將手機與電腦連到同一個Wi-fi
打開網頁伺服器之後,要將手機連到電腦一樣的區域網路,這樣手機才有辦法取得伺服器所發送的網頁檔案。要達成這樣的目的最簡單的方法就是將它們都連到同一個wi-fi。如果家裡沒有wi-fi分享機的話,也可以打開手機的個人熱點和電腦連線。
![]() |
---|
將手機與電腦連到同一個Wi-fi |
步驟3: 查詢電腦被分配到的ip
接著打開命令提示字元,輸入ipconfig,找到「無線區域網路介面卡Wi-Fi」這個區塊。就能查詢到電腦被分配到的ip,像是下圖中找到的結果為192.168.0.5。(linux/Mac的話使用ifconfig)
![]() |
---|
在工具列搜尋輸入cmd就能找到命令提示字元 |
![]() |
---|
輸入ipconfig |
![]() |
---|
IPv4位址就是電腦被分配到的ip |
步驟4: 將ip和port輸入到手機瀏覽器上即可看到網頁
查完ip後還記得最一開始的port嗎? 最後只要開啟手機的瀏覽器,將ip和port中間以冒號分隔輸入(這邊以192.168.0.5:5500為例),就能看到你電腦所發送出的網頁,是不是很方便呢!
![]() |
---|
將ip和port中間以冒號分隔輸入(這邊以192.168.0.5:5500為例) |