机上访问和调试本地的 H5 页面"/>

在手机上访问和调试本地的 H5 页面

在手机上访问本地的 H5 页面：

1. 手机和电脑处于同一局域网。
2. 在手机上是无法访问本地的 localhost 页面的，可以用电脑本机的 ip 地址替换 localhost。

   在 cmd 里输入 ipconfig，就可以看到 ipv4 地址，也就是电脑本机的 ip 地址。

在手机上调试本地的 H5 页面：

通过 spy-debugger 来实现。

spy-debugger 是一站式的页面调试、抓包工具，可以远程调试任何手机浏览器页面，任何手机移动端 webview 页面（例如：微信，HybridApp 等）。

1. 在命令行中输入相应命令安装 spy-debugger。

   Android：npm install spy-debugger -g。
   IOS：sudo npm install spy-debugger -g。

2. 手机和 PC 保持在同一网络下。

3. 在命令行中输入 spy-debugger 回车运行，浏览器会自动打开相应地址，如果没有自动打开则手动打开浏览器输入。

4. 在手机上设置 HTTP 代理：服务器地址设置为 PC 的 IP地址，端口设置为 spy-debugger 的启动端口，默认 9888。

   Android 设置代理步骤：设置 --> WLAN --> 长按选中网络 --> 修改网络 --> 高级 --> 代理设置 --> 手动。
   iOS 设置代理步骤：设置 --> 无线局域网 --> 选中网络 --> 配置代理 --> 手动。

5. 在手机上安装证书：点击浏览器打开的地址中的 请求抓包 --> RootCA --> Download，将下载下来的文件发到手机上，在手机上通过非微信的手机浏览器安装证书。

   必须先设置完代理后再通过非微信的手机浏览器安装证书。
   手机首次调试需要安装证书，已安装了证书的手机无需重复安装。
   IOS 新安装的证书需要手动打开证书信任。在 设置 --> 通用 --> 描述文件 中安装并信任描述文件。

6. 用手机浏览器访问要调试的页面即可。