[转载]如何在Windows中调试iOS中的Safari网页

需求背景

在做一个项目时，发现某些图片在安卓设备和电脑上能正常显示，但是在iOS上却无法显示。网上没有找到解决方案。因为没有苹果电脑，所以需要在Windows中对苹果系统进行网页调试。

系统环境

电脑操作系统：Windows 10 专业版 64位 (10.0，版本 1803-17134.228)

iPhone 7操作系统：iOS 12. beta8

安装前准备

1. 要保证iPhone/iPad能使用USB与电脑正常连接
2. 在iOS中打开调试模式：设置->Safari->高级->Web 检查器

安装

1. 安装scoop

注意以下命令实在PowerShell中执行  cmd不支持
# 如果安装失败，请执行以下命令再重新安装
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
并输入  A  回车
# 使用Powershell进行安装
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
你可能遇到些问题，如无法访问https://get.scoop.shz这个链接  和步骤2 安装ios-webkit-debug-proxy
需要挂翻墙代理  如果用ssr 需要关闭全局 关闭负载均衡

2. 安装ios-webkit-debug-proxy

# 在Powershell中执行
scoop bucket add extras
scoop install ios-webkit-debug-proxy

使用

1. 启动ios-webkit-debug-proxy

# 在Powershell中执行，-f表示指定前端工具，这里使用chrome-devtools进行调试
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

执行成功后，Powershell窗口会显示

Listing devices on :9221

2. 打开网页

在chrome浏览器中输入localhost:9221，

会列出设备列表，如果没有就刷新看看，确保你已链接了IOS设备，并信任电脑

点击选定的设备

如果进入网页后出现Inspectable pages for 你设备的名称字样，表示连接成功，然后在iPhone/iPad中使用Safari打开网页，再刷新电脑上的chrome，就会出现一个超链接(chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/1)，然后右键复制链接地址并在新标签中打开，就可以像在电脑中一样对网页进行调试了。

补充

如果没有连接成功，或碰到其它什么问题，可以查看ios-webkit-debug-proxy的官方文档，里面有更详细的说明。

问题解决

最后通过调试发现是图片本身的原因，重新上传图片就能在iOS中正常显示了。