在 Windows 上真机调试 iPhone(iOS) Safari Web 页面

在移动端页面开发中,需要处理 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
  1. 在 iPhone 中打开 Safari 浏览器,打开待调试页面。

  2. 打开 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 主页