windows10 chrome 调试 ios safari 方法
windows10 chrome 调试 ios safari 方法
需求背景
在做一个项目时，发现某些图片在安卓设备和电脑上能正常显示，但是在iOS上却无法显示。网上没有找到解决方案。因为没有苹果电脑，所以需要在Windows中对苹果系统进行网页调试。
系统环境
电脑操作系统：Windows 10 专业版 64位 (10.0，版本 14393)
iPad操作系统：iOS 10.3.2
安装前准备
要保证iPhone/iPad能使用USB与电脑正常连接
在iOS中打开调试模式：设置->Safari->高级->Web 检查器
安装
- 安装 scoop
# 使用 Powershell 进行安装
https://github.com/lukesampson/scoop
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')如果失败可尝试以下方式安装
iex (new-object net.webclient).downloadstring('https://raw.githubusercontent.com/lukesampson/scoop/master/bin/install.ps1')# 如果安装失败，请执行以下命令再重新安装
Set-ExecutionPolicy RemoteSigned -scope CurrentUser- 安装ios-webkit-debug-proxy
# 在 Powershell 中执行
scoop bucket add extras如果超时可以下载 (https://github.com/lukesampson/scoop-extras/)[https://github.com/lukesampson/scoop-extras/] 解压后存放 scoop/extras/ 目录下
(https://github.com/google/ios-webkit-debug-proxy)[https://github.com/google/ios-webkit-debug-proxy]
scoop install ios-webkit-debug-proxy使用
链接设备、打开 iTunes
- 启动
ios-webkit-debug-proxy
# 在 Powershell 中执行，-f 表示指定前端工具，这里使用 chrome-devtools 进行调试
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html执行成功后，Powershell窗口会显示
Listing devices on :9221
Connected :9222 to 你的设备名称- 打开网页
在chrome浏览器中输入localhost:9221，如果进入网页后出现Inspectable pages for 你设备的名称字样，表示连接成功，然后在iPhone/iPad中使用Safari打开网页，再刷新电脑上的chrome，就会出现一个超链接(chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/1)，然后右键复制链接地址并在新标签中打开，就可以像在电脑中一样对网页进行调试了。
补充
如果没有连接成功，或碰到其它什么问题，可以查看 ios-webkit-debug-proxy 的官方文档，里面有更详细的说明。
