前言
??相信很多小伙伴在開發(fā)移動(dòng)端網(wǎng)頁時(shí)，都會(huì)遇到兼容性問題的修改，尤其是當(dāng)項(xiàng)目運(yùn)行在真機(jī)上時(shí)，一些奇奇怪怪的bug接踵而至，很是頭疼。在Android設(shè)備上，我們可以輕松的在Chrome DevTools上進(jìn)行調(diào)試，但面對(duì)iOS設(shè)備，在我們沒有Mac電腦的情況下，調(diào)試iOS的頁面就是困難重重，通常都會(huì)選擇alert或者是vConsole來調(diào)試，但此方法也只是查看控制臺(tái)，卻無法查看Dom元素。
RemoteDebug iOS WebKit 適配器
??RemoteDebug iOS WebKit適配器是一個(gè)協(xié)議適配器，iOS上的Safari和WebView可以從VS Code，Chrome DevTools，Mozilla Debugger.html和其他與Chrome調(diào)試協(xié)議兼容的工具進(jìn)行調(diào)試。
??在Medium的介紹博客文章中閱讀更多內(nèi)容：Hello RemoteDebug iOS WebKit適配器：使用Chrome DevTools，VS Code和Mozilla Debugger.html ????進(jìn)行iOS網(wǎng)絡(luò)調(diào)試
原文出處：RemoteDebug iOS WebKit
Windows系統(tǒng)：
所需工具：
- windows powershell 5.1及以上版本；
- node.js環(huán)境；
- git環(huán)境；
- iTunes程序（可在Microsoft Store中安裝）或愛思助手；
- windows包管理器Scoop。
1. 安裝scoop主程序（已安裝可忽略此步驟）
1.1 首次安裝（非管理員運(yùn)行）
Win + R 打開運(yùn)行，輸入powershell回車；
# 腳本執(zhí)行策略更改
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
# 輸入 Y 或 A，同意
# 再執(zhí)行安裝命令
iwr -useb scoop.201704.xyz | iex
1.2 更換scoop鏡像庫地址
# 更換 scoop 的 repo 地址
scoop config SCOOP_REPO “gitee.com/glsnames/sc…” # 更換后更新一下
scoop update
2. 為scoop添加新bucket
2.1 安裝git程序（已安裝可忽略）
# 必裝git，scoop及bucket更新均依賴此軟件
scoop install git
2.2 添加extras庫
scoop bucket add extras
2.3 bucket的語法及如何添加第三方庫
# 查詢官方已有的bucket
scoop bucket known
# 基本語法
scoop bucket add <庫名（別名）> <git地址（添加第三方庫時(shí)必填）>
# 例如添加scoopcn庫
scoop bucket add scoopcn github.com/scoopcn/sco…
# 刪除bucket
scoop bucket rm <庫名（別名）>
ps：scoop所在目錄下不可有對(duì)應(yīng)庫名的文件夾，即便是空的也不行，需要先運(yùn)行scoop bucket rm <庫名> 進(jìn)行刪除。
2.4 代理（可選）
ps：即便上面已經(jīng)將scoop的鏡像庫替換成國內(nèi)的了，但安裝時(shí)依舊會(huì)有超時(shí)情況發(fā)生，可根據(jù)需要添加代理
# 添加代理
scoop config proxy 127.0.0.1:[代理端口]
# 移除代理
scoop config rm proxy
3. 安裝軟件
3.1 安裝 ios-webkit-debug-proxy
scoop install ios-webkit-debug-proxy
3.2 安裝 vs-libimobile
npm install -g vs-libimobile
3.3 安裝 remotedebug-ios-webkit-adapter
npm install remotedebug-ios-webkit-adapter -g
4. 調(diào)試
ps：調(diào)試前，需要將iPhone或iPad通過數(shù)據(jù)線連接到電腦上，打開iTunes或愛思助手，并在手機(jī)上信任此電腦。
4.1 運(yùn)行 remotedebug-ios-webkit-adapter
# 在 命令行/終端 中運(yùn)行
remotedebug_ios_webkit_adapter # 默認(rèn)運(yùn)行的端口是9000，如需指定端口，可在后面添加端口，例：
remotedebug_ios_webkit_adapter --port=9001
4.2 打開谷歌/Edge開發(fā)者工具
在地址欄里輸入 chrome://inspect/#devices 或 edge://inspect/#devices
4.3 配置
4.4 調(diào)試
這界面，非常熟悉的味道，不過也有個(gè)弊端，我電腦上無法使用console.log和console.error，但可以使用console.info，且無法輸出object對(duì)象，需要對(duì)其進(jìn)行序列化后輸出，至此，整體步驟已結(jié)束。文章來源：http://www.zghlxwxcb.cn/news/detail-773726.html
注意事項(xiàng)
可能會(huì)出現(xiàn)拋出錯(cuò)誤的地方時(shí)：
在安裝remotedebug-ios-webkit-adapter時(shí)，Windows 11系統(tǒng)會(huì)拋出錯(cuò)誤，解決方法就是找到電腦全局的npm包管理器安裝庫的位置，在該位置將remotedebug-ios-webkit-adapter從github上下載下來，編譯一次即可（其他的庫如果安裝有問題，也可以用此方法解決）文章來源地址http://www.zghlxwxcb.cn/news/detail-773726.html
到了這里，關(guān)于用 RemoteDebug iOS Webkit 在 Chrome DevTools 中調(diào)試iOS/iPadOS設(shè)備的前端頁面的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
