別再用電腦檢查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為例) |