在 Windows 上真机调试 iPhone(iOS) Safari Web 页面
#Tools 2019-03-18

在移动端页面开发中，需要处理 Android 和 iOS 的兼容性问题。在 Chrome DevTools 中选择手机模式，可以一定程度上模拟移动端的页面，但更多的只是方便进行页面布局的调试和兼容。一些移动端的特性与表现，在真机和模拟情况下还是有存在很大差别的（比如软键盘的弹出等），尤其是 iOS 出于某些“考虑”表现出不符合标准的 BUG，在 Windows Chrome 中更是难以定位。

本文介绍如何在 Windows 系统中连接 iPhone Web 页面进行真机调试。

工具资料

  • iPhone + 数据线
  • iTunes
  • Node.js 环境
  • remotedebug-ios-webkit-adapter
  • Chrome 浏览器（勿使用过低版本 Chrome）
  • 梯子（可能需要）

环境准备

实现真机调试主要是使用了 remotedebug-ios-webkit-adapter 这一工具，使用方法在其 gitHub 主页 上有介绍，可以直接按照其官方说明安装使用。本文对其 Windows 下的安装使用进行了一些细节的补充和说明。

安装 scoope

scoope 是一个 Windows 命令行安装工具，类似 linux 下的 yum 或 apt-get。remotedebug-ios-webkit-adapter 的安装将使用该工具。

使用 powershell（powershell 是 Windows 预装的 Shell 工具）依次执行一下命令，安装 scoope：

1
2
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

稍等片刻就安装成功了。如果安装失败，请尝试使用管理员权限执行。

安装 remotedebug-ios-webkit-adapter

使用 cmd、powershell 或 git bash 依次执行以下命令，安装依赖环境：

1
2
3
scoop bucket add extras
scoop install ios-webkit-debug-proxy
npm install -g vs-libimobile

（这里默认你的电脑已经安装了 Node.js 环境，否则 npm 命令将执行失败）

安装 remotedebug-ios-webkit-adapter：

1
npm install remotedebug-ios-webkit-adapter -g

安装成功后，你将能在命令行中使用 remotedebug_ios_webkit_adapter 命令

安装 iTunes

访问官网，下载 iTunes。这里注意 iTunes for Windows 提供两个版本，一个是从 Windows Store 下载，另一个是安装包。选择后者下载安装。

连接调试

  1. 进入 iPhonse 中的 设置 > Safari 浏览器 > 高级 > Web 检查器，开启该选项。

  2. 打开 iTunes 并连接 iPhone，在 iPhone 弹框中选择信任该电脑。

  3. 打开命令行，执行以下命令，启动适配器：

    1
    remotedebug_ios_webkit_adapter --port=9000

  4. 在 iPhone 中打开 Safari 浏览器，打开待调试页面。

  5. 打开 Chrome 浏览器，进入 chrome://inspect/#devices 页面，在 Discover network targets 选项添加 localhost:9000 配置。刷新页面，这时页面中会出现 'Remote Target' 列表，该列表展示了 iPhone 中打开的页面，点击 inspect，即可进行调试。

注意：如果第 5 步中未出现待调试页面，请重启 remotedebug_ios_webkit_adapter 工具，然后刷新或重启浏览器重试。

说明

在首次点击 inspect 打开真机调试工具时可能需要科学上网，否则可能出现 404 错误。

命令行执行失败时，请尝试使用管理员权限，或查看其官网说明。

请勿使用较低版本的 Chrome 浏览器

该例中使用了 Windows 10、Chrome 73.0.3683.75、iOS 12.1.4。

其他系统下的安装和使用请查看 remotedebug-ios-webkit-adapter gitHub 主页。