Android

1 启用 USB 调试

打开设置,如果最底下已经有开发者选项,点击进去。

如果没有,找到关于手机-软件信息-软件版本号,点击多次开启开发者选项。

在开发者选项内打开 USB 调试。

将电脑和手机通过 USB 连接。

接下来的时候手机可能会弹出询问是否信任连接的电脑,选择是。

2 使用 chrome 调试

打开 Chrome 浏览器,进入 chrome://inspect/#devices 页面。

就可以看到手机浏览器或者 app 内嵌 webview 的页面了。

iOS

iOS 上不管看到的是什么浏览器,实际上都是和 Safari 用的一样的内核,都需要在 macOS 的 Safari 上调试。

1 启用 macOS 上 Safari 调试功能

在 Safari 的设置页面,选择高级 tab 面板,勾选 「在菜单栏中显示“开发”菜单」。

这个时候菜单栏上会多出「开发」一栏。

2 在 iOS 设备上允许 Safari 被调试调试

设置-Safari 浏览器-高级-网页检查器,开关打开。

数据线连接电脑,后续会出现输入密码以信任电脑的操作。

再打开 macOS 的 Safari ,点击「开发」菜单,这个时候应该能够同时看到我们电脑名称和被连接的设备的名称。

子菜单下就是我们设备上打开的 html 也面了。如果一个页面也看不到,那可能是 safari 没有打开,或者是要调试的 app 没有开发 web view 调试能力。

HTTPS 页面调试

如果我们电脑上启动了一个 http 服务器,并且要在开发的时候调试 https 页面,那么我们需要用到 http 代理, whistle 是个不错的选择。

https://github.com/avwo/whistlegithub.com

保证电脑和手机在同一个局域网内,电脑上启动 whistle 后,在手机中配置代理。

Android 和 iOS 都是在当前连接的 Wi-Fi 上进行设置 http 代理。需要设置服务器地址(开发机器局域网地址,mac 可以按着 option 按键点击菜单栏 Wi-Fi 图标),还需要设置端口(whistle 默认 8899)。

配置好代理后,在手机上打开,http://rootca.pro/ 下载证书。(或者打开 whistle管理端页面 http://localhost:8899 扫码下载,使用手机上的相机应用即可)

iOS

提示下载描述文件,确认。

设置-通用-描述文件-已下载描述文件(whistle 开头)- 点击右上角安装。

设置-关于本机-证书信任设置,开启刚刚安装的证书。

Android

下载证书,安装证书即可。

接下来就可以访问本地的 https 站点了。