在手机上访问和调试本地的 H5 页面
在手機上訪問本地的 H5 頁面:
在 cmd 里輸入 ipconfig,就可以看到 ipv4 地址,也就是電腦本機的 ip 地址。
在手機上調試本地的 H5 頁面:
通過 spy-debugger 來實現。
spy-debugger 是一站式的頁面調試、抓包工具,可以遠程調試任何手機瀏覽器頁面,任何手機移動端 webview 頁面(例如:微信,HybridApp 等)。
在命令行中輸入相應命令安裝 spy-debugger。
Android:npm install spy-debugger -g。
IOS:sudo npm install spy-debugger -g。
手機和 PC 保持在同一網絡下。
在命令行中輸入 spy-debugger 回車運行,瀏覽器會自動打開相應地址,如果沒有自動打開則手動打開瀏覽器輸入。
在手機上設置 HTTP 代理:服務器地址設置為 PC 的 IP地址,端口設置為 spy-debugger 的啟動端口,默認 9888。
Android 設置代理步驟:設置 --> WLAN --> 長按選中網絡 --> 修改網絡 --> 高級 --> 代理設置 --> 手動。
iOS 設置代理步驟:設置 --> 無線局域網 --> 選中網絡 --> 配置代理 --> 手動。
在手機上安裝證書:點擊瀏覽器打開的地址中的 請求抓包 --> RootCA --> Download,將下載下來的文件發到手機上,在手機上通過非微信的手機瀏覽器安裝證書。
必須先設置完代理后再通過非微信的手機瀏覽器安裝證書。
手機首次調試需要安裝證書,已安裝了證書的手機無需重復安裝。
IOS 新安裝的證書需要手動打開證書信任。在 設置 --> 通用 --> 描述文件 中安裝并信任描述文件。
用手機瀏覽器訪問要調試的頁面即可。
總結
以上是生活随笔為你收集整理的在手机上访问和调试本地的 H5 页面的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: iOS之一个超赞的视频直播、第三方库,直
- 下一篇: PS 基础知识