閱讀本文之前建議先看一遍移動前端開發調試。上文中詳細介紹了通過Safari 進行iOS 上H5 頁面的模擬器和真機調試,能解決大部分的調試場景。但是Google 給我們提供了另一種方式——[ios-webkit-debug-proxy。
?為什么要用ios-webkit-debug-proxy
1、 iOS 上的H5 只能使用Safari調試,之前一直用Chrome,Safari 的調試功能太難用- 如果你在UIWebView中注入一段js,Safari 并不能看到。[WebViewJavascriptBridge](https://github.com/marcuswestin/WebViewJavascriptBridge) 就是在webview 中注入了jsbridge。
2、 使用Linux 作為開發機的朋友。 注意,通過企業證書In house發布的測試客戶端還是不能調試,所以對于大企業的很多人來說,證書問題一直都是問題。
3、 自動化測試相關的目的,搜索ios-webkit-debug-proxy 看看是不是你想要的。
4、 ......
使用
項目的README 中有詳細介紹。我只說下mac 下的使用
?安裝
brew install ios-webkit-debug-proxy
Start the proxy
提前打開模擬器,用USB連接真機。
// -f 參數直接指定使用chrome的devtools作前端。
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html
在Chrome中打開頁面
chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/1
?這里有個坑點是,沒法像Safari 一樣,直接選擇打開哪一個頁面調試,而是通過上面鏈接最后的page/1確定。
現在瀏覽器輸入:http://127.0.0.1:9222 ,然后看排序,先手動改吧。
此時就能愉快的調試頁面了。
如果到此沒有成功,請查看README, 我只是想說明有這個東西的存在,并且能解決一部分問題而已。