需求背景
在做一個(gè)項(xiàng)目時(shí)，發(fā)現(xiàn)某些圖片在安卓設(shè)備和電腦上能正常顯示急膀，但是在iOS上卻無法顯示。網(wǎng)上沒有找到解決方案龄捡。因?yàn)闆]有蘋果電腦卓嫂，所以需要在Windows中對(duì)蘋果系統(tǒng)進(jìn)行網(wǎng)頁調(diào)試。
系統(tǒng)環(huán)境
電腦操作系統(tǒng)：Windows 10 專業(yè)版 64位 (10.0聘殖，版本 14393)
iPad操作系統(tǒng)：iOS 10.3.2
安裝前準(zhǔn)備
- 要保證iPhone/iPad能使用USB與電腦正常連接
- 在iOS中打開調(diào)試模式：
設(shè)置->Safari->高級(jí)->Web 檢查器
安裝
1. 安裝scoop
# 使用Powershell進(jìn)行安裝
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
# 如果安裝失敗晨雳，請(qǐng)執(zhí)行以下命令再重新安裝
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
2. 安裝ios-webkit-debug-proxy
# 在Powershell中執(zhí)行
scoop bucket add extras
scoop install ios-webkit-debug-proxy
使用
1. 啟動(dòng)ios-webkit-debug-proxy
# 在Powershell中執(zhí)行行瑞，-f表示指定前端工具，這里使用chrome-devtools進(jìn)行調(diào)試
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html
執(zhí)行成功后悍募，Powershell窗口會(huì)顯示
Listing devices on :9221
Connected :9222 to 你的設(shè)備名稱
2. 打開網(wǎng)頁
在chrome瀏覽器中輸入localhost:9221蘑辑，如果進(jìn)入網(wǎng)頁后出現(xiàn)Inspectable pages for 你設(shè)備的名稱字樣，表示連接成功坠宴，然后在iPhone/iPad中使用Safari打開網(wǎng)頁洋魂，再刷新電腦上的chrome，就會(huì)出現(xiàn)一個(gè)超鏈接(chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/1)喜鼓，然后右鍵復(fù)制鏈接地址并在新標(biāo)簽中打開副砍，就可以像在電腦中一樣對(duì)網(wǎng)頁進(jìn)行調(diào)試了。
補(bǔ)充
如果沒有連接成功庄岖，或碰到其它什么問題豁翎，可以查看ios-webkit-debug-proxy的官方文檔，里面有更詳細(xì)的說明隅忿。
問題解決
最后通過調(diào)試發(fā)現(xiàn)是圖片本身的原因心剥，重新上傳圖片就能在iOS中正常顯示了。
