最簡方案：無線路由器 + 本地 IP 訪問
- 電腦連無線路由器 (有線/無線均可)。
- 手機/平板連**同一個 WiFi**。
- 電腦啟動本地服務器：
# Python 3 一鍵啟動 (當前目錄為根目錄)
python -m http.server 8080
# Node.js http-server
npx http-server -p 8080
# PHP 內置服務器
php -S 0.0.0.0:8080
# VS Code Live Server 擴展 (右鍵 Open with Live Server)
# 自動刷新、HTTPS 支持、最推薦前端開發
- 查看電腦內網 IP：
ipconfig (Windows) / ifconfig (Mac/Linux) → 如 192.168.1.100。
- 手機瀏覽器訪問
https://192.168.1.100:8080 即可實時預覽。
進階：自動刷新 + 多設備同步
- BrowserSync：
npm i -g browser-sync && browser-sync start --server --files "**/*"，修改代碼所有設備自動刷新、滾動同步、表單輸入同步。
- VS Code Live Server：內置自動刷新，安裝擴展即用。
- Weinre / Chrome DevTools 遠程調試：手機頁面調試 (console、elements、network)。
無 WiFi 環境：手機熱點
- 手機開啟「個人熱點」。
- 電腦連接手機熱點。
- 同上啟動服務器，手機訪問電腦 IP (通常
172.20.10.1 或查看 ipconfig)。
公網測試：內網穿透
- ngrok：
ngrok http 8080 生成公網 HTTPS 域名，微信/外網可訪問。
- frp / cpolar / 花生殼內網版：自建服務器長期穿透。
注意事項
- 防火牆放行服務器端口 (入站規則)。
- 移動端 viewport 設置：
<meta name="viewport" content="width=device-width, initial-scale=1">。
- 本地服務器綁定
0.0.0.0 而非 127.0.0.1，否則僅本機可訪問。
