前言

最近在寫《iOS代碼調(diào)試》系列的博客，估計(jì)會(huì)有十篇以上的內(nèi)容，等到都寫完了會(huì)在Github以一個(gè)倉庫的形式開源出來，歡迎關(guān)注我的Github：

• LeoMobileDeveloper

WebView

大多數(shù)App會(huì)選擇H5去實(shí)現(xiàn)某些弱交互但是卻需要熱更新界面，這時(shí)候WebView就派上用場(chǎng)了，那么如何對(duì)WebView進(jìn)行調(diào)試呢？

Safari

開啟開發(fā)菜單

Safari -> 偏好設(shè)置

20180617214445705.png

勾選“在菜單欄顯示開發(fā)菜單”

20180617214508815.png

設(shè)備的Safari調(diào)試

設(shè)置 -> Safari -> 高級(jí) - > 開啟Web檢查器

20180617214525386.png

選擇要調(diào)試的網(wǎng)頁

在App內(nèi)打開對(duì)應(yīng)的Webview

狀態(tài)欄點(diǎn)擊開發(fā) -> 選擇設(shè)備 -> 選擇網(wǎng)頁

20180617214618632.png

然后，就可以通過safari調(diào)試這個(gè)網(wǎng)頁了

20180617214545793.png

對(duì)于iOS原生開發(fā)來說，用的做多的還是終端，比如你要測(cè)試一個(gè)WKWebView的JSBridge

window.webkit.messageHandlers.bridgeName.postMessage({//data..})

或者測(cè)試一個(gè)scheme

window.location.herf="xxxxx"

建議iOS開發(fā)者學(xué)習(xí)一些JS的基本知識(shí)，這會(huì)對(duì)調(diào)試WebView大有幫助。

Chrome調(diào)試

Chrome調(diào)試比較適合寫H5的同學(xué)，因?yàn)樵谶@里可以使用類似React/Redux等插件來提高效率

準(zhǔn)備工作：

• 開啟iOS設(shè)備中Safari設(shè)置的WebContent檢查器
• 確保手機(jī)被系統(tǒng)信任

安裝：ios-webkit-debug-proxy

brew install ios-webkit-debug-proxy

安裝：remotedebug-ios-webkit-adapter

npm install remotedebug-ios-webkit-adapter -g

運(yùn)行adapter:

remotedebug_ios_webkit_adapter --port=9000

接著，在App中打開包含WebView的應(yīng)用，然后chrome打開如下地址

chrome://inspect/#devices

點(diǎn)擊config

添加localhost:9000

然后，就能夠看到剛剛應(yīng)用中的WebView了

點(diǎn)擊inspect，就可以用Chrome進(jìn)行調(diào)試了：

轉(zhuǎn)載:Safari/Chrome調(diào)試WebView