dailyLearning -- Safari/Chrome除錯WebView

前言

最近在寫《iOS程式碼除錯》系列的部落格，估計會有十篇以上的內容，等到都寫完了會在Github以一個倉庫的形式開源出來，歡迎關注我的Github：

• LeoMobileDeveloper

WebView

大多數App會選擇H5去實現某些弱互動但是卻需要熱更新介面，這時候WebView就派上用場了，那麼如何對WebView進行除錯呢？

Safari

開啟開發選單

Safari -> 偏好設定

勾選“在選單欄顯示開發選單”

裝置的Safari除錯

設定 -> Safari -> 高階 - > 開啟Web檢查器

選擇要除錯的網頁

在App內開啟對應的Webview

狀態列點選開發 -> 選擇裝置 -> 選擇網頁

然後，就可以通過safari除錯這個網頁了

對於iOS原生開發來說，用的做多的還是終端，比如你要測試一個WKWebView的JSBridge

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

或者測試一個scheme

window.location.herf="xxxxx"

建議iOS開發者學習一些JS的基本知識，這會對除錯WebView大有幫助。

Chrome除錯

Chrome除錯比較適合寫H5的同學，因為在這裡可以使用類似React/Redux等外掛來提高效率

準備工作：

• 開啟iOS裝置中Safari設定的WebContent檢查器
• 確保手機被系統信任

安裝：ios-webkit-debug-proxy

brew install ios-webkit-debug-proxy

安裝：remotedebug-ios-webkit-adapter

npm install remotedebug-ios-webkit-adapter -g

執行adapter:

remotedebug_ios_webkit_adapter --port=9000

接著，在App中開啟包含WebView的應用，然後chrome開啟如下地址

chrome://inspect/#devices

點選config

新增localhost:9000

然後，就能夠看到剛剛應用中的WebView了

點選inspect，就可以用Chrome進行除錯了：

轉載:Safari/Chrome除錯WebView