現在的框架提供非常好的工具鏈，周到全面。

以react為例子，當你用create-react-app 創建一個react項目，啟動后，會有如下提示：

本機可以通過http://localhost:3000訪問，還提示你，局域網內可以通過http://192.168.1.8:3000訪問。

Nice.gif!

那如果簡單的靜態頁面如何使用手機查看及調試呢？操作也很簡單，可以在vscode上安裝一個 live server 的擴展。

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Live Server 可以為靜態和動態頁面，啟動一個本地開發服務器，這個服務還可以實時重載。

安裝這個擴展之后，用vscode打開靜態html項目包，打到項目入口頁面如index.html。右鍵，點擊Open with Liver Server，即可啟動一個服務，用以訪問該網站。

默認的訪問地址為：http://127.0.0.1:5500/index.html。

此時，手機還無法訪問。想要手機能訪問，也非常簡單，只要把你電腦的在局域網中的地址把 127.0.0.1替換掉就行。

你可以通過 cmd 輸入ipconfig /all，查看本機地址。

當然，直接的方式是讓Live Server直接生成以本機局域網地址的服務。其步驟為：

1 打開vscode 首選項–>設置，搜索 Live Server，點擊編輯 Live Server 的 setting.json。

2 在setting.json中添加兩個配置項：

“liveServer.settings.useLocalIp”:true,

“liveServer.settings.host”: “localhost”

參考資料

server – Why can’t I enter the url on my phone’s browser to view my live site? – Stack Overflow

總結

以上是生活随笔為你收集整理的如何在手机上调试本地网页如何让手机访问本地网站的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。