调试 IOS 设备网页

前提：系统环境

电脑操作系统：Windows 10 专业版 64位 iPad操作系统：iOS 10.3.2

Step 1：在iOS中打开调试模式

设置 -> Safari -> 高级 -> 开启 Web 检查器

截图 (1).png

01 (1).png

01 (2).png

Step 2：安装 scoop

1. 使用 Powershell 进行安装

截图 (3).png

注意：安装过程很慢，需要爬梯安装！！

iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

2. 如果失败（如图1）

图1：

截图 (4).png

请依次执行以下命令再重新安装

Set-ExecutionPolicy RemoteSigned -scope CurrentUser  // 修改执行策略
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

截图 (5).png

3. 如果还是安装失败，请依次执行以下命令再重新安装

Set-ExecutionPolicy RemoteSigned -scope CurrentUser // 前面2.已经执行了，可不需再执行
iex (new-object net.webclient).downloadstring('https://raw.githubusercontent.com/lukesampson/scoop/master/bin/install.ps1')

安装完毕后，执行：

scoop update

若出现以下情况：

截图 (6).png 说明安装失败（失败原因是：可能网速问题，scoop没有安装成功，该命令也就无法执行），需要卸载重装！

重新安装步骤（依旧使用 Powershell 进行执行命令）：

1. 依次运行以下命令：

scoop uninstall scoop
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
iwr -useb get.scoop.sh | iex

如果上面第一句不成功（亲测确实不成功！！），尝试另一个方案（假定你的 Scoop 安装在缺省位置）：

cd
del .\scoop -Force

1. 重新安装，执行命令：

iex (new-object net.webclient).downloadstring('https://raw.githubusercontent.com/lukesampson/scoop/master/bin/install.ps1')

截图 (7).png

Step 3：通过scoop安装 ios-webkit-debug-proxy

依次执行以下命令：

scoop bucket add extras
scoop install ios-webkit-debug-proxy

1. 执行scoop bucket add extras命令，出现以下情况：

截图 (8).png

原因可能是：

网络慢；
scoop不是最新版；
scoop没有安装好；

2. 若执行

scoop help

截图 (9).png

说明scoop 安装成功！！！

3. 查看scoop 的版本状态

scoop status

若出现如图提示，则需要更新scoop

截图 (10).png

4. 执行scoop update 出现以下情况，是网络问题！！

截图 (11).png

只能再次执行

scoop updata

截图 (12).png

5. 查看是否update成功与否，执行：scoop status

截图 (13).png

此刻scoop 更新安装成功！

6. 由于上次执行过`scoop bucket add extras`

截图 (14).png

需要删除extras

scoop bucket rm extras

截图 (15).png

7. 再次执行命令

scoop bucket add extras
scoop install ios-webkit-debug-proxy

截图 (16).png

此刻安装成功！

8. 若网络真的很慢，可以尝试以下方案解决(建议还是用powershell命令执行，这样解压放置可能会有不可预知的问题)

如果超时可以下载 https://github.com/lukesampson/scoop-extras/解压后存放在scoop/bucket/extras/ 目录下

Step 4：启动ios-webkit-debug-proxy

在 Powershell 中执行，-f 表示指定前端工具，这里使用 chrome-devtools 进行调试

ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

执行成功后，Powershell窗口会显示

截图 (17).png

备注：启动ios_webkit_debug_proxy会影响上网！

Step 5：链接设备，调试网页

方式一：

1. 在chrome浏览器中输入`localhost:9221`进入网页后出现你设备的名称字样（如图），表示连接成功

2. 点击`localhost:9222`，你会发现里面是空白的，说明你还没有打开H5页面，用`safari`打开一个H5页面，`刷新chrome`，就会发现多了几条数据

3. 刷新电脑上的chrome，点击出现的超链接，点击其中一个（如4.）会打开一个新标签`chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/4`，或者右键复制链接地址并在新标签中打开：

打开的新标签页面空白！！

截图 (21).png

方式二：

打开chrome, 输入网址： `chrome://inspect/#devices`如下图所示，点击 `inspect`, 即可调试，但是出现了空白。

截图 (22).png

解决调试页面空白问题

（1）安装 vs-libimobile

npm install -g vs-libimobile

截图 (23).png

（2）安装最新版本的适配器 remotedebug-ios-webkit-adapter

npm install remotedebug-ios-webkit-adapter -g

截图 (24).png

（3）手机同样需要开启 Web 检查器，USB 连接电脑
（4）启动，remotedebug_ios_webkit_adapter 或 remotedebug_ios_webkit_adapter --port=9000（默认是9000端口，你也可以自己指定端口），执行以下命令：

remotedebug_ios_webkit_adapter --port=9222  // ios-webkit-debug-proxy 将自动为您运行 无需单独启动

截图 (25).png

（5）谷歌浏览器打开 chrome://inspect/#devices -> Configure -> 配置上一步指定的端口

截图 (26).png

（6）将设备通过USB连接到PC，在chrome浏览器地址栏输入：chrome://inspect/#devices

截图 (27).png

（7）在手机上打开网页的时候，chrome就会检测到网页，点击Inspect就可以直接调试

备注：

使用chrome也会出现偶尔检测不到的情况或者比较卡的情况，这时候可能需要在命令行重启下remote debug-ios-webkit-adapter（反复尝试好多次发现每当想在resources中查看.js文件的时候就会断开连接，其他情况几乎没出现过链接断掉的情况）

第一次使用的时候可能需要翻墙，后续若没有清空掉缓存，则不需要翻墙即可即时调试

ios的调试中在inspect 后，调试面板中则反映到手机上，而不会在pc调试面板中

启动 remotedebug_ios_webkit_adapter 不影响上网

只能调试web网页，无法调试嵌入app中wab页面

如何调试移动设备网页（下）