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

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

1. 手机和电脑处于同一局域网。
2. 关闭电脑防火墙。
3. 通过本地服务器打开想要查看的页面。
4. 在 cmd 里输入 ipconfig，就可以看到 ipv4 地址，也就是电脑本机的 ip 地址。
5. 在手机上是无法访问电脑上的 localhost 页面的（因为电脑上的 localhost 发出去的数据都不会出了电脑自身，手机自然访问不到），可以用电脑的本机 ip 地址替换 localhost（同一局域网下的任何设备都能通过访问到电脑的 IP 地址来访问其中的服务），即可在手机上访问电脑中起的服务。

   本机 IP 地址：当一台主机要接入网络时，路由器会为其分配一个 IP 地址。只要关掉电脑的防火墙，同一局域网下的任何设备都能通过访问到这台电脑的 IP 地址来访问其中的服务。
   127 开头的任何非全 0 和非全 1 的 IP 地址：环回自检地址，表示一台主机本身。发出去的数据根本都不会出了这台主机，会被自己接收。用于本地软件环回测试。
   localhost：是一个域名，会被解析为 127.0.0.1 的 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 代理：服务器地址设置为电脑的 IP地址，端口设置为 spy-debugger 的启动端口，默认 9888。

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

   

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

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

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