在移动端页面开发中,需要处理 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:
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
稍等片刻就安装成功了。如果安装失败,请尝试使用管理员权限执行。
安装 remotedebug-ios-webkit-adapter
使用 cmd、powershell 或 git bash 依次执行以下命令,安装依赖环境:
scoop bucket add extras
scoop install ios-webkit-debug-proxy
npm install -g vs-libimobile
(这里默认你的电脑已经安装了 Node.js 环境,否则 npm
命令将执行失败)
安装 remotedebug-ios-webkit-adapter:
npm install remotedebug-ios-webkit-adapter -g
安装成功后,你将能在命令行中使用 remotedebug_ios_webkit_adapter
命令
安装 iTunes
访问官网,下载 iTunes。这里注意 iTunes for Windows 提供两个版本,一个是从 Windows Store 下载,另一个是安装包。选择后者下载安装。
连接调试
进入 iPhonse 中的 设置 > Safari 浏览器 > 高级 > Web 检查器,开启该选项。
打开 iTunes 并连接 iPhone,在 iPhone 弹框中选择信任该电脑。
打开命令行,执行以下命令,启动适配器:
remotedebug_ios_webkit_adapter --port=9000
在 iPhone 中打开 Safari 浏览器,打开待调试页面。
打开 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 主页。