欣迪

在開發時,常常會遇到一些電腦模擬手機無法複製的問題。有時候,我們需要在手機上測試我們的網頁應用程式,確保它在移動設備上一切正常。這篇文章要告訴你,怎麼樣用 http-server 這個超簡單的工具,建立本地伺服器,讓你可以在手機上順利測試你的程式。

什麼是 http-server

首先,http-server 就是一個簡單到不行的指令列工具,它可以快速地把你現在的資料夾變成一個靜態檔案伺服器。這就意味著你可以在自己電腦上架設一個 HTTP 伺服器,然後在其他裝置上訪問你的程式。底下是用 http-server 的步驟:

# 安裝,須先安裝 node.js
npm install -g http-server

# 啟動 (進入頁面存放的資料夾後執行)
cd your_project
http-server

找到你電腦的 IP 位址

接下來只要找到你的電腦 ip ,就能在同一個 wifi 環境下用其他裝置連線。 以 Mac 為例,輸入以下指令:

找到你電腦的 IP 位址

在輸出中,找一下像這樣的資訊: 可以試試看搜索 broadcast 這個關鍵字

en0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
	inet 192.168.1.100 netmask 0xffffff00 broadcast 192.168.1.255

這裡的本地 IP 位址是 192.168.1.100,把它記下來。

在手機上測試你的程式

你的電腦IP位址 換成剛剛找到的 IP 位址。這樣你就能在手機上輕鬆測試你的網頁程式。

這邊的範例結果是: http://192.168.1.100:8080

訂閱 IT-Monk

訂閱最新文章的發布消息! 😚😚😚
Loading

作者介紹 - 欣迪

欣迪

從設計到寫程式,發現自己有追求前端技巧的自虐傾向。不斷的踩坑,再從坑裡爬出來,慢慢對攀岩有點心得。 目前在多間公司擔任網站設計顧問。 同時也是網站架設公司負責人。