在 Windows 中使用 Chrome Devtools 调试 iOS Safari

.md

在 Windows 中使用 Chrome Devtools 调试 iOS Safari

1. 安装 Scoop

更多详细资料: https://github.com/ScoopInstaller/Scoop

iwr -useb get.scoop.sh | iex

2. 安装 iOS WebKit Debug Proxy

更多详细资料: https://github.com/google/ios-webkit-debug-proxy

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

3. 安装 RemoteDebug iOS WebKit Adapter

更多详细资料: https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter

npm install remotedebug-ios-webkit-adapter -g

4. 安装 iTunes

Windows x64 : https://www.apple.com/itunes/download/win64

Windows x32 : https://www.apple.com/itunes/download/win32

需要安装的步骤到此为止; 使用数据线连接 iPhone / iPad , 点击信任此设备

5. 启用 Safari 浏览器的 "网页检查器" 功能

打开 设置 -> Safari浏览器 -> 高级 -> 网页检查器, 点击按钮启用此功能

6. 启动 RemoteDebug iOS WebKit Adapter

remotedebug_ios_webkit_adapter --port=9000

7. 调试代码

确认手机已经与 Windows 成功连接

在 Chrome 浏览器地址栏输入 chrome://inspect

点击 Configure... 按钮, 在弹窗中输入 localhost:9000 (与 RemoteDebug iOS WebKit Adapter 监听的端口一致) 并点击 done 按钮完成

刷新此页面, 等待 Remote Target 下出现需要调试的网址, 点击网址下 inspect 按钮, 即可进入远程代理调试界面

远程代理调试界面示例: